@roadtrip/components 3.11.0 → 3.11.2

package/dist/esm/road-plate-number.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, e as createEvent, h } from './index-4b484f35.js';
-import { l as licensePlateStarEu } from './index-8f45025b.js';
+import { r as registerInstance, c as createEvent, h } from './index-52302079.js';
+import { l as licensePlateStarEu } from './index-891decf5.js';
 
 const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;outline:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{border-color:var(--road-input-outline-variant);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
 

package/dist/esm/road-plate-number.entry.js.map

@@ -1 +1 @@
-{"file":"road-plate-number.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,8+FAA8+F;;MCQx/F,WAAW;;;;;;;;;;;IAEd,cAAS,GAAG;MAClB;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,WAAW;OACzB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,WAAW;OACzB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,YAAY;OAC1B;KACF,CAAC;IA+EM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;OAC/C;MACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;MACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;KAC1C,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;mBA3FuE,IAAI;oBAK1D,KAAK;;oBAUL,KAAK;iBAKkC,EAAE;;;;;;EAWjD,YAAY;IACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACzF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GAC1F;EAkCM,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACrB,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GACnC;EAqBD,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC;IAE/D,QACE,wBAAkB,KAAK,EAAE,6BAA6B,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,cAAc,EAAE,IAClG,aAAO,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,qBAAqB,IAC/C,WAAK,KAAK,EAAC,oBAAoB,IAC7B,iBAAW,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,kBAAkB,GAAc,EAC3E,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;OACZ,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CACtD,CACF,CACA,EACP,IAAI,CAAC,SAAS;SAEX,gBACE,KAAK,EAAC,sCAAsC,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EACvI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,GAAG,EACb,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GAEZ;SAGX,aACE,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EACvI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,EACH,aAAO,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,IAC7C,WAAK,KAAK,EAAC,kBAAkB,GAAO,CAC9B,CACS,EACnB;GACH;;;;;;;;;","names":[],"sources":["./src/components/plate-number/plate-number.css?tag=road-plate-number&encapsulation=scoped","./src/components/plate-number/plate-number.tsx"],"sourcesContent":["/*\n * Plate Number\n *\n * Index\n * - Plate Number\n * - Input\n */\n\n/* PLATE NUMBER\n -------------------- */\n\n:host {\n  display: block;\n}\n\n.plate-number {\n  --margin-bottom: 0;\n}\n\n.plate-number-start,\n.plate-number-end {\n  width: 1.75rem;\n  height: calc(3rem - 0.25rem);\n  background: var(--road-info-50);\n}\n\n.input-group-prepend {\n  margin-right: -1px;\n}\n\n.input-group-prepend,\n.input-group-append {\n  padding: 0;\n}\n\n.plate-number-start {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 0;\n  margin-left: 1px;\n  color: var(--road-icon-inverse);\n  border-radius: 0.125rem 0 0 0.125rem;\n}\n\n.plate-number-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #f3db53;\n}\n\n.plate-number-location {\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n}\n\n.plate-number-end {\n  margin-right: 1px;\n  border-radius: 0 0.125rem 0.125rem 0;\n}\n\n.plate-number-be .plate-number-input {\n  color: var(--road-on-danger-surface);\n}\n\n.plate-number-be .plate-number-input,\n.plate-number-be .input-group-append,\n.plate-number-be .input-group-prepend {\n  border-color: var(--road-danger-outline);\n}\n\n/* INPUT\n -------------------- */\n\n.plate-number-input {\n  position: relative;\n  display: block;\n  height: 3rem;\n  margin: 0;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-heading-04);\n  font-weight: 700;\n  color: var(--road-on-surface);\n  text-align: center;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0;\n  outline: 0;\n  box-shadow: none;\n  appearance: none;\n}\n\n.plate-number-input::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Disabled state\n */\n\n.plate-number-input:disabled {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n.plate-number-input:disabled ~ .input-group-prepend,\n.plate-number-input:disabled ~ .input-group-append {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .plate-number-input:not(:disabled):not([readonly]):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.plate-number-input:not([readonly]):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/* MOTORBIKE\n -------------------- */\n\n.motorbike-plate .plate-number-input {\n  height: 6rem;\n  padding: 0.75rem 1rem 0;\n  resize: none;\n  border-left: 0;\n}\n\n.motorbike-plate .input-group-prepend,\n.motorbike-plate .input-group-append {\n  align-items: flex-start;\n  height: 6rem;\n  padding: 0;\n}\n\n.motorbike-plate .plate-number-start {\n  margin-top: 1px;\n  border-radius: 0.125rem 0 0;\n}\n\n.motorbike-plate .plate-number-end {\n  margin-top: 1px;\n  border-radius: 0 0.125rem 0 0;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n   protected valueChanged() {\n     this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n   }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      input.value = input.value.toUpperCase() || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"],"version":3}
+{"file":"road-plate-number.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,8+FAA8+F;;MCQx/F,WAAW;;;;;;;;;;;IAEd,cAAS,GAAG;MAClB;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,WAAW;OACzB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,WAAW;OACzB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;OACxB;MACD;QACE,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,YAAY;OAC1B;KACF,CAAC;IA+EM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;OAC/C;MACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;MACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;KAC1C,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;mBA3FuE,IAAI;oBAK1D,KAAK;;oBAUL,KAAK;iBAKkC,EAAE;;;;;;EAWjD,YAAY;IACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACzF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GAC1F;EAkCM,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACrB,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GACnC;EAqBD,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC;IAE/D,QACE,wBAAkB,KAAK,EAAE,6BAA6B,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,cAAc,EAAE,IAClG,aAAO,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,qBAAqB,IAC/C,WAAK,KAAK,EAAC,oBAAoB,IAC7B,iBAAW,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,kBAAkB,GAAc,EAC3E,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;OACZ,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CACtD,CACF,CACA,EACP,IAAI,CAAC,SAAS;SAEX,gBACE,KAAK,EAAC,sCAAsC,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EACvI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,GAAG,EACb,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GAEZ;SAGX,aACE,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EACvI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,EACH,aAAO,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,IAC7C,WAAK,KAAK,EAAC,kBAAkB,GAAO,CAC9B,CACS,EACnB;GACH;;;;;;;;;","names":[],"sources":["src/components/plate-number/plate-number.css?tag=road-plate-number&encapsulation=scoped","src/components/plate-number/plate-number.tsx"],"sourcesContent":["/*\n * Plate Number\n *\n * Index\n * - Plate Number\n * - Input\n */\n\n/* PLATE NUMBER\n -------------------- */\n\n:host {\n  display: block;\n}\n\n.plate-number {\n  --margin-bottom: 0;\n}\n\n.plate-number-start,\n.plate-number-end {\n  width: 1.75rem;\n  height: calc(3rem - 0.25rem);\n  background: var(--road-info-50);\n}\n\n.input-group-prepend {\n  margin-right: -1px;\n}\n\n.input-group-prepend,\n.input-group-append {\n  padding: 0;\n}\n\n.plate-number-start {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 0;\n  margin-left: 1px;\n  color: var(--road-icon-inverse);\n  border-radius: 0.125rem 0 0 0.125rem;\n}\n\n.plate-number-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #f3db53;\n}\n\n.plate-number-location {\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n}\n\n.plate-number-end {\n  margin-right: 1px;\n  border-radius: 0 0.125rem 0.125rem 0;\n}\n\n.plate-number-be .plate-number-input {\n  color: var(--road-on-danger-surface);\n}\n\n.plate-number-be .plate-number-input,\n.plate-number-be .input-group-append,\n.plate-number-be .input-group-prepend {\n  border-color: var(--road-danger-outline);\n}\n\n/* INPUT\n -------------------- */\n\n.plate-number-input {\n  position: relative;\n  display: block;\n  height: 3rem;\n  margin: 0;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-heading-04);\n  font-weight: 700;\n  color: var(--road-on-surface);\n  text-align: center;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0;\n  outline: 0;\n  box-shadow: none;\n  appearance: none;\n}\n\n.plate-number-input::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Disabled state\n */\n\n.plate-number-input:disabled {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n.plate-number-input:disabled ~ .input-group-prepend,\n.plate-number-input:disabled ~ .input-group-append {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .plate-number-input:not(:disabled):not([readonly]):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.plate-number-input:not([readonly]):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/* MOTORBIKE\n -------------------- */\n\n.motorbike-plate .plate-number-input {\n  height: 6rem;\n  padding: 0.75rem 1rem 0;\n  resize: none;\n  border-left: 0;\n}\n\n.motorbike-plate .input-group-prepend,\n.motorbike-plate .input-group-append {\n  align-items: flex-start;\n  height: 6rem;\n  padding: 0;\n}\n\n.motorbike-plate .plate-number-start {\n  margin-top: 1px;\n  border-radius: 0.125rem 0 0;\n}\n\n.motorbike-plate .plate-number-end {\n  margin-top: 1px;\n  border-radius: 0 0.125rem 0 0;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n   protected valueChanged() {\n     this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n   }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      input.value = input.value.toUpperCase() || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"],"version":3}

package/dist/esm/road-profil-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-4b484f35.js';
+import { r as registerInstance, h } from './index-52302079.js';
 
 const profilDropdownCss = ":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;z-index:2;display:flex;flex-direction:column;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";
 

package/dist/esm/road-profil-dropdown.entry.js.map

@@ -1 +1 @@
-{"file":"road-profil-dropdown.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,i1DAAi1D;;MCkB91D,QAAQ;;;;;;IAUX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAP0C,KAAK;;EASjD,MAAM;IAEJ,QACE,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxF,WAAK,KAAK,EAAE,QAAQ,IAClB,eACE,uBACE,YAAM,IAAI,EAAC,QAAQ,GAAE,CACT,CACV,CACF,CACE,EACV,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAC,aAAa,IACtB,mBAAa,IAAI,EAAC,IAAI,IACpB,YAAM,IAAI,EAAC,YAAY,GAAE,CACb,EACd,WAAK,KAAK,EAAC,kBAAkB,IAC3B,YAAM,KAAK,EAAC,uBAAuB,IACjC,YAAM,IAAI,EAAC,MAAM,GAAE,CACd,EACP,sBACE,YAAM,IAAI,EAAC,OAAO,GAAE,CACT,CACT,CACF,EACN,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"sources":["./src/components/profil-dropdown/profil-dropdown.css?tag=road-profil-dropdown&encapsulation=shadow","./src/components/profil-dropdown/profil-dropdown.tsx"],"sourcesContent":["/*\n * Profil Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* PROFIL DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n  font-size: var(--road-font-size-16);\n}\n\n.dropdown {\n  position: relative;\n  width: max-content;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  cursor: pointer;\n  outline: none;\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  z-index: 1;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n-------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  top: 0;\n  left: 5.5rem;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n/* ITEM\n -------------------- */\n\nroad-item {\n  font-size: var(--road-button-medium);\n}\n\n.profil-item {\n  display: flex;\n  padding-bottom: 1rem;\n  margin: 1rem;\n  cursor: auto;\n  border-bottom: 1px solid var(--road-outline);\n}\n\n.profil-item-info {\n  display: flex;\n  flex-direction: column;\n  margin-left: 1rem;\n  text-align: left;\n}\n\n.profil-item-info-name {\n  font-weight: 700;\n}\n\n\n.profil-item road-avatar:hover{\n  box-shadow: none;\n}\n\n.dropdown-item {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-button-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline);\n  border-bottom: 1px solid;\n}\n\n.dropdown-item road-icon{\n  margin-right: 0.7rem;\n}\n\n/**\n * Hover state\n */\n\nroad-item:hover:first-child,\nroad-item.focus-visible:first-child {\n  background: none;\n}\n\nroad-item:hover,\nroad-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n * @slot avatar - Content of the avatar (img or First letter) <road-img> or <road-label>.\n * @slot avatarItem - Content of the avatar item (img or First letter) <road-img> or <road-label>.\n * @slot name - Content First and Last Name.\n * @slot email - Content email.\n\n\n */\n\n@Component({\n  tag: 'road-profil-dropdown',\n  styleUrl: 'profil-dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex`}>\n            <div>\n              <road-avatar>\n                <slot name=\"avatar\"/>\n              </road-avatar>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu`}>\n          <div class=\"profil-item\">\n            <road-avatar size=\"sm\">\n              <slot name=\"avatarItem\"/>\n            </road-avatar>\n            <div class=\"profil-item-info\">\n              <span class=\"profil-item-info-name\">\n                <slot name=\"name\"/>\n              </span>\n              <road-label>\n                <slot name=\"email\"/>\n              </road-label>\n            </div>\n          </div>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-profil-dropdown.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,i1DAAi1D;;MCkB91D,QAAQ;;;;;;IAUX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAP0C,KAAK;;EASjD,MAAM;IAEJ,QACE,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxF,WAAK,KAAK,EAAE,QAAQ,IAClB,eACE,uBACE,YAAM,IAAI,EAAC,QAAQ,GAAE,CACT,CACV,CACF,CACE,EACV,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAC,aAAa,IACtB,mBAAa,IAAI,EAAC,IAAI,IACpB,YAAM,IAAI,EAAC,YAAY,GAAE,CACb,EACd,WAAK,KAAK,EAAC,kBAAkB,IAC3B,YAAM,KAAK,EAAC,uBAAuB,IACjC,YAAM,IAAI,EAAC,MAAM,GAAE,CACd,EACP,sBACE,YAAM,IAAI,EAAC,OAAO,GAAE,CACT,CACT,CACF,EACN,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"sources":["src/components/profil-dropdown/profil-dropdown.css?tag=road-profil-dropdown&encapsulation=shadow","src/components/profil-dropdown/profil-dropdown.tsx"],"sourcesContent":["/*\n * Profil Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* PROFIL DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n  font-size: var(--road-font-size-16);\n}\n\n.dropdown {\n  position: relative;\n  width: max-content;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  cursor: pointer;\n  outline: none;\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  z-index: 1;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n-------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  top: 0;\n  left: 5.5rem;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n/* ITEM\n -------------------- */\n\nroad-item {\n  font-size: var(--road-button-medium);\n}\n\n.profil-item {\n  display: flex;\n  padding-bottom: 1rem;\n  margin: 1rem;\n  cursor: auto;\n  border-bottom: 1px solid var(--road-outline);\n}\n\n.profil-item-info {\n  display: flex;\n  flex-direction: column;\n  margin-left: 1rem;\n  text-align: left;\n}\n\n.profil-item-info-name {\n  font-weight: 700;\n}\n\n\n.profil-item road-avatar:hover{\n  box-shadow: none;\n}\n\n.dropdown-item {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-button-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline);\n  border-bottom: 1px solid;\n}\n\n.dropdown-item road-icon{\n  margin-right: 0.7rem;\n}\n\n/**\n * Hover state\n */\n\nroad-item:hover:first-child,\nroad-item.focus-visible:first-child {\n  background: none;\n}\n\nroad-item:hover,\nroad-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n * @slot avatar - Content of the avatar (img or First letter) <road-img> or <road-label>.\n * @slot avatarItem - Content of the avatar item (img or First letter) <road-img> or <road-label>.\n * @slot name - Content First and Last Name.\n * @slot email - Content email.\n\n\n */\n\n@Component({\n  tag: 'road-profil-dropdown',\n  styleUrl: 'profil-dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex`}>\n            <div>\n              <road-avatar>\n                <slot name=\"avatar\"/>\n              </road-avatar>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu`}>\n          <div class=\"profil-item\">\n            <road-avatar size=\"sm\">\n              <slot name=\"avatarItem\"/>\n            </road-avatar>\n            <div class=\"profil-item-info\">\n              <span class=\"profil-item-info-name\">\n                <slot name=\"name\"/>\n              </span>\n              <road-label>\n                <slot name=\"email\"/>\n              </road-label>\n            </div>\n          </div>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/road-progress-indicator-horizontal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const progressIndicatorHorizontalCss = ":host{display:block}.progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}.progress-indicator-horizontal.progress-indicator-horizontal-header{background-color:var(--road-header-surface)}.progress-indicator-horizontal-item{display:flex;flex:1;flex-direction:column;text-align:center}.progress-indicator-horizontal-item:last-child{margin-top:0.125rem}.progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-header-surface-disabled)}.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link{cursor:not-allowed}.progress-indicator-horizontal-link{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}.progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{color:currentColor}.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{color:currentColor}.progress-indicator-horizontal-header .progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.progress-indicator-horizontal-header .completed:not(:last-child)::after{background:var(--road-header-badge)}.current .progress-indicator-horizontal-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.completed .progress-indicator-horizontal-icon{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}.current .progress-indicator-horizontal-title,.completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-surface)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-header-surface)}";
 

package/dist/esm/road-progress-indicator-horizontal.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress-indicator-horizontal.entry.js","mappings":";;AAAA,MAAM,8BAA8B,GAAG,gxHAAgxH;;MCmB1yH,OAAO;;;iBAKwC,SAAS;;;;;;;;EAiChE,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,+DAA+D,IAAI,CAAC,KAAK,EAAE,GAAG,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,eAAe,EAAE,GAAG,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IACpK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IAIxE,QACE,EAAC,IAAI,QACH,eACE,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IACjC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CACF,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","./src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/*\n * Progress-indicator-horizontal\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL\n -------------------- */\n\n.progress-indicator-horizontal {\n  display: flex;\n  padding-left: 0;\n  margin: 0;\n  font-family: var(--road-font);\n  line-height: 1.5;\n  list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n  background-color: var(--road-header-surface);\n}\n\n\n/* PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- */\n\n.progress-indicator-horizontal-item {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n  margin-top: 0.125rem;\n}\n\n/**\n * Line between items\n */\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-header-surface-disabled);\n}\n\n\n/**\n * Disabled click for current and next steps\n */\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n  cursor: not-allowed;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- */\n\n.progress-indicator-horizontal-link {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-decoration: none;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- */\n\n.progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n  background: var(--road-header-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- */\n\n.progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-header-surface-weak);\n}\n\n/* STEP COMPLETED\n -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after {\n  background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon{\n  width: calc(1.5rem - 4px);\n  height: calc(1.5rem - 4px);\n  color: var(--road-primary);\n  background: var(--road-surface);\n  border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {\n  color: var(--road-header-badge);\n  background: none;\n  border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n  width: calc(1.5rem);\n  height: calc(1.5rem);\n  color: var(--road-on-header-badge);\n  background: var(--road-header-badge);\n  border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-header-surface);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n\n\n       return (\n         <Host>\n           <nav>\n             <ul class={`${colorClass}`}>\n               <li class={`${stateClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title\"/>\n                   </span>\n                 </a>\n               </li>\n               <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}
+{"file":"road-progress-indicator-horizontal.entry.js","mappings":";;AAAA,MAAM,8BAA8B,GAAG,gxHAAgxH;;MCmB1yH,OAAO;;;iBAKwC,SAAS;;;;;;;;EAiChE,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,+DAA+D,IAAI,CAAC,KAAK,EAAE,GAAG,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,eAAe,EAAE,GAAG,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IACpK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IAIxE,QACE,EAAC,IAAI,QACH,eACE,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IACjC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CACF,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/*\n * Progress-indicator-horizontal\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL\n -------------------- */\n\n.progress-indicator-horizontal {\n  display: flex;\n  padding-left: 0;\n  margin: 0;\n  font-family: var(--road-font);\n  line-height: 1.5;\n  list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n  background-color: var(--road-header-surface);\n}\n\n\n/* PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- */\n\n.progress-indicator-horizontal-item {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n  margin-top: 0.125rem;\n}\n\n/**\n * Line between items\n */\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-header-surface-disabled);\n}\n\n\n/**\n * Disabled click for current and next steps\n */\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n  cursor: not-allowed;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- */\n\n.progress-indicator-horizontal-link {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-decoration: none;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- */\n\n.progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n  background: var(--road-header-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- */\n\n.progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-header-surface-weak);\n}\n\n/* STEP COMPLETED\n -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after {\n  background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon{\n  width: calc(1.5rem - 4px);\n  height: calc(1.5rem - 4px);\n  color: var(--road-primary);\n  background: var(--road-surface);\n  border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {\n  color: var(--road-header-badge);\n  background: none;\n  border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n  width: calc(1.5rem);\n  height: calc(1.5rem);\n  color: var(--road-on-header-badge);\n  background: var(--road-header-badge);\n  border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-header-surface);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n\n\n       return (\n         <Host>\n           <nav>\n             <ul class={`${colorClass}`}>\n               <li class={`${stateClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title\"/>\n                   </span>\n                 </a>\n               </li>\n               <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}

package/dist/esm/road-progress-indicator-vertical-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const progressIndicatorVerticalItemCss = "road-progress-indicator-vertical-item{display:flex;flex-direction:row;justify-content:flex-start;min-height:65px}.progress-indicator-vertical-item-content{display:inline-block;margin-left:1rem}road-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link{cursor:not-allowed}.progress-indicator-vertical-link{position:relative;z-index:1;display:flex}.progress-indicator-vertical-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-vertical-icon road-icon{display:flex}.progress-indicator-vertical-substep-link{position:relative;z-index:1;display:flex;margin:0 0.5rem}.progress-indicator-vertical-line{position:absolute;top:24px;left:11px;z-index:-1;height:calc(100% - 24px);border-left:2px solid var(--road-surface-disabled)}road-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line{border-left:0}.progress-indicator-vertical-substep-icon{display:inline-flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;margin-top:0.7rem;background:var(--road-surface-disabled);border-radius:50%}.progress-indicator-vertical-substep-beforeline{position:absolute;top:0;left:3px;z-index:-1;height:calc(30% - 8px);border-left:2px solid var(--road-surface-disabled)}.progress-indicator-vertical-substep-line{position:absolute;top:19px;left:3px;z-index:-1;height:calc(83% - 8px);border-left:2px solid var(--road-surface-disabled)}.progress-indicator-vertical-title road-label{display:block;font-size:var(--road-body-large);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-vertical-description{display:block;margin:0;font-size:var(--road-label-small);font-weight:400;color:var(--road-on-surface-disabled)}.current .progress-indicator-vertical-icon{color:var(--road-on-primary);background:var(--road-primary)}.current .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.current .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.current .progress-indicator-vertical-substep-icon{background:var(--road-primary);border:0}.current .progress-indicator-vertical-substep-beforeline{border-left:2px solid var(--road-primary)}.in-progress .progress-indicator-vertical-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.in-progress .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.in-progress .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.in-progress .progress-indicator-vertical-line{background:var(--road-primary)}.completed:not(:last-child)::after{background:var(--road-primary)}.completed .progress-indicator-vertical-icon{color:var(--road-primary);background:none;border:2px solid var(--road-primary)}.completed .progress-indicator-vertical-line{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-substep-beforeline{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-substep-line{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.completed .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.completed .progress-indicator-vertical-substep-icon{background:none;border:2px solid var(--road-primary)}";
 

package/dist/esm/road-progress-indicator-vertical-item.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress-indicator-vertical-item.entry.js","mappings":";;AAAA,MAAM,gCAAgC,GAAG,q9GAAq9G;;MCUj/G,6BAA6B;;;;EAExC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAO,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/progress-indicator-vertical-item/progress-indicator-vertical-item.css?tag=road-progress-indicator-vertical-item","./src/components/progress-indicator-vertical-item/progress-indicator-vertical-item.tsx"],"sourcesContent":["/*\n * Progress Indicator Vertical Item\n *\n */\n\n/* PROGRESS INDICATOR VERTICAL ITEM\n   -------------------- */\n\nroad-progress-indicator-vertical-item {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  min-height: 65px;\n}\n\n.progress-indicator-vertical-item-content {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n/**\n* Disabled click for current and next steps\n*/\n\nroad-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link {\n  cursor: not-allowed;\n}\n\n/* VERTICAL STEPPER LINK\n    -------------------- */\n\n.progress-indicator-vertical-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n}\n\n/* VERTICAL STEPPER ICON\n    -------------------- */\n\n.progress-indicator-vertical-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-indicator-vertical-icon road-icon{\n  display: flex;\n}\n\n.progress-indicator-vertical-substep-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  margin: 0 0.5rem;\n}\n\n.progress-indicator-vertical-line {\n  position: absolute;\n  top: 24px;\n  left: 11px;\n  z-index: -1;\n  height: calc(100% - 24px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\nroad-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line {\n  border-left: 0;\n}\n\n.progress-indicator-vertical-substep-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.5rem;\n  height: 0.5rem;\n  margin-top: 0.7rem;\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n}\n\n.progress-indicator-vertical-substep-beforeline {\n  position: absolute;\n  top: 0;\n  left: 3px;\n  z-index: -1;\n  height: calc(30% - 8px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\n.progress-indicator-vertical-substep-line {\n  position: absolute;\n  top: 19px;\n  left: 3px;\n  z-index: -1;\n  height: calc(83% - 8px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\n/* VERTICAL STEPPER TITLE\n    -------------------- */\n\n.progress-indicator-vertical-title road-label{\n  display: block;\n  font-size: var(--road-body-large);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-vertical-description{\n  display: block;\n  margin: 0;\n  font-size: var(--road-label-small);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n/* STEP CURRENT\n    -------------------- */\n\n.current .progress-indicator-vertical-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n\n.current .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.current .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.current .progress-indicator-vertical-substep-icon {\n  background: var(--road-primary);\n  border: 0;\n}\n\n.current .progress-indicator-vertical-substep-beforeline {\n  border-left: 2px solid var(--road-primary);\n}\n\n\n/* STEP IN PROGRESS\n   -------------------- */\n\n.in-progress .progress-indicator-vertical-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.in-progress .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.in-progress .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.in-progress .progress-indicator-vertical-line {\n  background: var(--road-primary);\n}\n\n/* STEP COMPLETED\n    -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-icon {\n  color: var(--road-primary);\n  background: none;\n  border: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-line {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-substep-beforeline {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-substep-line {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.completed .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.completed .progress-indicator-vertical-substep-icon {\n  background: none;\n  border: 2px solid var(--road-primary);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot - Content of the progress indicator vertical item\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical-item',\n  styleUrl: 'progress-indicator-vertical-item.css',\n})\nexport class ProgressIndicatorVerticalItem {\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-progress-indicator-vertical-item.entry.js","mappings":";;AAAA,MAAM,gCAAgC,GAAG,q9GAAq9G;;MCUj/G,6BAA6B;;;;EAExC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAO,CACF,EACP;GACH;;;;;;","names":[],"sources":["src/components/progress-indicator-vertical-item/progress-indicator-vertical-item.css?tag=road-progress-indicator-vertical-item","src/components/progress-indicator-vertical-item/progress-indicator-vertical-item.tsx"],"sourcesContent":["/*\n * Progress Indicator Vertical Item\n *\n */\n\n/* PROGRESS INDICATOR VERTICAL ITEM\n   -------------------- */\n\nroad-progress-indicator-vertical-item {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  min-height: 65px;\n}\n\n.progress-indicator-vertical-item-content {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n/**\n* Disabled click for current and next steps\n*/\n\nroad-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link {\n  cursor: not-allowed;\n}\n\n/* VERTICAL STEPPER LINK\n    -------------------- */\n\n.progress-indicator-vertical-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n}\n\n/* VERTICAL STEPPER ICON\n    -------------------- */\n\n.progress-indicator-vertical-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-indicator-vertical-icon road-icon{\n  display: flex;\n}\n\n.progress-indicator-vertical-substep-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  margin: 0 0.5rem;\n}\n\n.progress-indicator-vertical-line {\n  position: absolute;\n  top: 24px;\n  left: 11px;\n  z-index: -1;\n  height: calc(100% - 24px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\nroad-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line {\n  border-left: 0;\n}\n\n.progress-indicator-vertical-substep-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.5rem;\n  height: 0.5rem;\n  margin-top: 0.7rem;\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n}\n\n.progress-indicator-vertical-substep-beforeline {\n  position: absolute;\n  top: 0;\n  left: 3px;\n  z-index: -1;\n  height: calc(30% - 8px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\n.progress-indicator-vertical-substep-line {\n  position: absolute;\n  top: 19px;\n  left: 3px;\n  z-index: -1;\n  height: calc(83% - 8px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\n/* VERTICAL STEPPER TITLE\n    -------------------- */\n\n.progress-indicator-vertical-title road-label{\n  display: block;\n  font-size: var(--road-body-large);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-vertical-description{\n  display: block;\n  margin: 0;\n  font-size: var(--road-label-small);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n/* STEP CURRENT\n    -------------------- */\n\n.current .progress-indicator-vertical-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n\n.current .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.current .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.current .progress-indicator-vertical-substep-icon {\n  background: var(--road-primary);\n  border: 0;\n}\n\n.current .progress-indicator-vertical-substep-beforeline {\n  border-left: 2px solid var(--road-primary);\n}\n\n\n/* STEP IN PROGRESS\n   -------------------- */\n\n.in-progress .progress-indicator-vertical-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.in-progress .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.in-progress .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.in-progress .progress-indicator-vertical-line {\n  background: var(--road-primary);\n}\n\n/* STEP COMPLETED\n    -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-icon {\n  color: var(--road-primary);\n  background: none;\n  border: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-line {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-substep-beforeline {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-substep-line {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.completed .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.completed .progress-indicator-vertical-substep-icon {\n  background: none;\n  border: 2px solid var(--road-primary);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot - Content of the progress indicator vertical item\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical-item',\n  styleUrl: 'progress-indicator-vertical-item.css',\n})\nexport class ProgressIndicatorVerticalItem {\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/road-progress-indicator-vertical.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const progressIndicatorVerticalCss = ":host{display:block}.progress-indicator-vertical{display:flex;flex-direction:column;padding-left:0;list-style:none}";
 

package/dist/esm/road-progress-indicator-vertical.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress-indicator-vertical.entry.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,qHAAqH;;MCmB7I,yBAAyB;;;;EAEjC,MAAM;IAEJ,QACE,EAAC,IAAI,QACH,eACE,cACE,eAAO,CACJ,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/progress-indicator-vertical/progress-indicator-vertical.css?tag=road-progress-indicator-vertical&encapsulation=shadow","./src/components/progress-indicator-vertical/progress-indicator-vertical.tsx"],"sourcesContent":["/*\n * Progress Indicator Vertical\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* VERTICAL STEPPER\n -------------------- */\n\n.progress-indicator-vertical {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  list-style: none;\n}\n\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the stepper item, it should be road-vertical-stepper-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-vertical-stepper-item\n * \n * if the state of the step is in-progress add the class `in-progress` on the road-vertical-stepper-item\n * \n * if the state of the step is current add the class `current` on the road-vertical-stepper-item\n * \n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>`\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical',\n  styleUrl: 'progress-indicator-vertical.css',\n  shadow: true,\n})\nexport class ProgressIndicatorVertical {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n               <slot/>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}
+{"file":"road-progress-indicator-vertical.entry.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,qHAAqH;;MCmB7I,yBAAyB;;;;EAEjC,MAAM;IAEJ,QACE,EAAC,IAAI,QACH,eACE,cACE,eAAO,CACJ,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/progress-indicator-vertical/progress-indicator-vertical.css?tag=road-progress-indicator-vertical&encapsulation=shadow","src/components/progress-indicator-vertical/progress-indicator-vertical.tsx"],"sourcesContent":["/*\n * Progress Indicator Vertical\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* VERTICAL STEPPER\n -------------------- */\n\n.progress-indicator-vertical {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  list-style: none;\n}\n\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the stepper item, it should be road-vertical-stepper-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-vertical-stepper-item\n * \n * if the state of the step is in-progress add the class `in-progress` on the road-vertical-stepper-item\n * \n * if the state of the step is current add the class `current` on the road-vertical-stepper-item\n * \n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>`\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical',\n  styleUrl: 'progress-indicator-vertical.css',\n  shadow: true,\n})\nexport class ProgressIndicatorVertical {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n               <slot/>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}

package/dist/esm/road-progress-tracker-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const progressTrackerItemCss = "road-progress-tracker-item{display:flex;flex-direction:row;justify-content:flex-start;min-height:65px}.progress-tracker-item-content{display:inline-block;margin-left:1rem}.progress-tracker-link{position:relative;z-index:1;display:flex;margin-top:0.4rem}.progress-tracker-circle{display:inline-flex;align-items:center;justify-content:center;width:0.75rem;height:0.75rem;font-size:var(--road-button-medium);font-weight:700;background:var(--road-surface);border:2px solid var(--road-on-surface-disabled);border-radius:50%;fill:currentColor}.progress-tracker-substep-circle{display:inline-flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;margin-left:0.13rem;font-size:var(--road-button-medium);font-weight:700;background:var(--road-surface);border:2px solid var(--road-on-surface-disabled);border-radius:50%;fill:currentColor}.progress-tracker-line{position:absolute;top:8px;left:0.35rem;z-index:-1;height:100%;border-left:1px solid var(--road-on-surface-disabled)}road-progress-tracker-item:last-child .progress-tracker-line{border-left:0}.before-collapse .progress-tracker-line{border-left:1px dashed var(--road-on-surface-disabled)}road-collapse road-progress-tracker-item:last-child .progress-tracker-line{border-left:0}.progress-tracker-title{display:block;font-size:var(--road-body-large);font-weight:700;color:var(--road-on-surface-disabled)}.progress-tracker-substep-title{display:block;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-tracker-description{display:block;margin:0 0 2rem;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-disabled)}.progress-tracker-substep-description{display:block;margin:0 0 2rem;font-size:var(--road-overline);font-weight:400;color:var(--road-on-surface-disabled)}.completed:not(:last-child)::after{background:var(--road-primary)}.completed .progress-tracker-circle,.completed .progress-tracker-substep-circle{background:var(--road-primary);border:0}.current .progress-tracker-circle,.current .progress-tracker-substep-circle,.in-progress .progress-tracker-circle,.in-progress .progress-tracker-substep-circle{background:var(--road-surface);border:1px solid var(--road-primary)}.completed .progress-tracker-line,.in-progress .progress-tracker-line{border-left:1px solid var(--road-primary)}.current .progress-tracker-title,.current .progress-tracker-substep-title,.in-progress .progress-tracker-title,.in-progress .progress-tracker-substep-title,.completed .progress-tracker-title,.completed .progress-tracker-substep-title{font-weight:700;color:var(--road-on-surface)}.current .progress-tracker-description,.current .progress-tracker-substep-description,.in-progress .progress-tracker-description,.in-progress .progress-tracker-substep-description,.completed .progress-tracker-description,.completed .progress-tracker-substep-description{color:var(--road-on-surface-weak)}";
 

package/dist/esm/road-progress-tracker-item.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress-tracker-item.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,k2FAAk2F;;MCkBp3F,mBAAmB;;;;EAE9B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAO,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/progress-tracker-item/progress-tracker-item.css?tag=road-progress-tracker-item","./src/components/progress-tracker-item/progress-tracker-item.tsx"],"sourcesContent":["/*\n * Progress tracker itel\n *\n */\n\n/* PROGRESS TRACKER ITEM\n   -------------------- */\n\nroad-progress-tracker-item {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  min-height: 65px;\n}\n\n.progress-tracker-item-content {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n/* PROGRESS TRACKER LINK\n    -------------------- */\n\n.progress-tracker-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  margin-top: 0.4rem;\n}\n\n/* PROGRESS TRACKER ICON\n    -------------------- */\n\n.progress-tracker-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.75rem;\n  height: 0.75rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  background: var(--road-surface);\n  border: 2px solid var(--road-on-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-tracker-substep-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.5rem;\n  height: 0.5rem;\n  margin-left: 0.13rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  background: var(--road-surface);\n  border: 2px solid var(--road-on-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-tracker-line {\n  position: absolute;\n  top: 8px;\n  left: 0.35rem;\n  z-index: -1;\n  height: 100%;\n  border-left: 1px solid var(--road-on-surface-disabled);\n}\n\nroad-progress-tracker-item:last-child .progress-tracker-line {\n  border-left: 0;\n}\n\n.before-collapse .progress-tracker-line {\n  border-left: 1px dashed var(--road-on-surface-disabled);\n}\n\nroad-collapse road-progress-tracker-item:last-child .progress-tracker-line {\n  border-left: 0;\n}\n\n/* PROGRESS TRACKER TITLE\n    -------------------- */\n\n.progress-tracker-title {\n  display: block;\n  font-size: var(--road-body-large);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-tracker-substep-title {\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-tracker-description{\n  display: block;\n  margin: 0 0 2rem;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-tracker-substep-description{\n  display: block;\n  margin: 0 0 2rem;\n  font-size: var(--road-overline);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n/* STEP COMPLETED\n    -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.completed .progress-tracker-circle,\n.completed .progress-tracker-substep-circle{\n  background: var(--road-primary);\n  border: 0;\n}\n\n/* STEP CURRENT\n   -------------------- */\n\n.current .progress-tracker-circle,\n.current .progress-tracker-substep-circle,\n.in-progress .progress-tracker-circle,\n.in-progress .progress-tracker-substep-circle  {\n  background: var(--road-surface);\n  border: 1px solid var(--road-primary);\n}\n\n.completed .progress-tracker-line,\n.in-progress .progress-tracker-line {\n  border-left: 1px solid var(--road-primary);\n}\n\n.current .progress-tracker-title,\n.current .progress-tracker-substep-title,\n.in-progress .progress-tracker-title,\n.in-progress .progress-tracker-substep-title,\n.completed .progress-tracker-title,\n.completed .progress-tracker-substep-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.current .progress-tracker-description,\n.current .progress-tracker-substep-description,\n.in-progress .progress-tracker-description,\n.in-progress .progress-tracker-substep-description,\n.completed .progress-tracker-description,\n.completed .progress-tracker-substep-description {\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot - Content of the progress tracker item\n * it should be `<div class=\"progress-tracker-link\">`\n *`<span class=\"progress-tracker-circle\"></span>`\n *`<span class=\"progress-tracker-line\"></span>`\n *`</div>`\n *`<div class=\"progress-tracker-item-content\">`\n *`<road-label class=\"progress-tracker-title\">Label</road-label>`\n *`<road-label class=\"progress-tracker-description\">Description</road-label>`\n *`</div>`\n */\n\n@Component({\n  tag: 'road-progress-tracker-item',\n  styleUrl: 'progress-tracker-item.css',\n})\nexport class ProgressTrackerItem {\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-progress-tracker-item.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,k2FAAk2F;;MCkBp3F,mBAAmB;;;;EAE9B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAO,CACF,EACP;GACH;;;;;;","names":[],"sources":["src/components/progress-tracker-item/progress-tracker-item.css?tag=road-progress-tracker-item","src/components/progress-tracker-item/progress-tracker-item.tsx"],"sourcesContent":["/*\n * Progress tracker itel\n *\n */\n\n/* PROGRESS TRACKER ITEM\n   -------------------- */\n\nroad-progress-tracker-item {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  min-height: 65px;\n}\n\n.progress-tracker-item-content {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n/* PROGRESS TRACKER LINK\n    -------------------- */\n\n.progress-tracker-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  margin-top: 0.4rem;\n}\n\n/* PROGRESS TRACKER ICON\n    -------------------- */\n\n.progress-tracker-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.75rem;\n  height: 0.75rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  background: var(--road-surface);\n  border: 2px solid var(--road-on-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-tracker-substep-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.5rem;\n  height: 0.5rem;\n  margin-left: 0.13rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  background: var(--road-surface);\n  border: 2px solid var(--road-on-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-tracker-line {\n  position: absolute;\n  top: 8px;\n  left: 0.35rem;\n  z-index: -1;\n  height: 100%;\n  border-left: 1px solid var(--road-on-surface-disabled);\n}\n\nroad-progress-tracker-item:last-child .progress-tracker-line {\n  border-left: 0;\n}\n\n.before-collapse .progress-tracker-line {\n  border-left: 1px dashed var(--road-on-surface-disabled);\n}\n\nroad-collapse road-progress-tracker-item:last-child .progress-tracker-line {\n  border-left: 0;\n}\n\n/* PROGRESS TRACKER TITLE\n    -------------------- */\n\n.progress-tracker-title {\n  display: block;\n  font-size: var(--road-body-large);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-tracker-substep-title {\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-tracker-description{\n  display: block;\n  margin: 0 0 2rem;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-tracker-substep-description{\n  display: block;\n  margin: 0 0 2rem;\n  font-size: var(--road-overline);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n/* STEP COMPLETED\n    -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.completed .progress-tracker-circle,\n.completed .progress-tracker-substep-circle{\n  background: var(--road-primary);\n  border: 0;\n}\n\n/* STEP CURRENT\n   -------------------- */\n\n.current .progress-tracker-circle,\n.current .progress-tracker-substep-circle,\n.in-progress .progress-tracker-circle,\n.in-progress .progress-tracker-substep-circle  {\n  background: var(--road-surface);\n  border: 1px solid var(--road-primary);\n}\n\n.completed .progress-tracker-line,\n.in-progress .progress-tracker-line {\n  border-left: 1px solid var(--road-primary);\n}\n\n.current .progress-tracker-title,\n.current .progress-tracker-substep-title,\n.in-progress .progress-tracker-title,\n.in-progress .progress-tracker-substep-title,\n.completed .progress-tracker-title,\n.completed .progress-tracker-substep-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.current .progress-tracker-description,\n.current .progress-tracker-substep-description,\n.in-progress .progress-tracker-description,\n.in-progress .progress-tracker-substep-description,\n.completed .progress-tracker-description,\n.completed .progress-tracker-substep-description {\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot - Content of the progress tracker item\n * it should be `<div class=\"progress-tracker-link\">`\n *`<span class=\"progress-tracker-circle\"></span>`\n *`<span class=\"progress-tracker-line\"></span>`\n *`</div>`\n *`<div class=\"progress-tracker-item-content\">`\n *`<road-label class=\"progress-tracker-title\">Label</road-label>`\n *`<road-label class=\"progress-tracker-description\">Description</road-label>`\n *`</div>`\n */\n\n@Component({\n  tag: 'road-progress-tracker-item',\n  styleUrl: 'progress-tracker-item.css',\n})\nexport class ProgressTrackerItem {\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/road-progress-tracker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const progressTrackerCss = ":host{display:block}:host ul{padding-left:0}.progress-tracker{display:flex;flex-direction:column;padding-left:0;list-style:none}";
 

package/dist/esm/road-progress-tracker.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress-tracker.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,kIAAkI;;MCgBhJ,eAAe;;;;EAEvB,MAAM;IAEJ,QACE,EAAC,IAAI,QACH,eACE,cACE,eAAO,CACJ,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/progress-tracker/progress-tracker.css?tag=road-progress-tracker&encapsulation=shadow","./src/components/progress-tracker/progress-tracker.tsx"],"sourcesContent":["/*\n * Progress tracker\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n:host ul{\n  padding-left: 0;\n}\n\n/* PROGRESS TRACKER\n -------------------- */\n\n.progress-tracker {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  list-style: none;\n}\n\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the progress stepper tracker item, it should be road-progress-tracker-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-progress-tracker-item\n * if the state of the step is in progress add the class `in-progress` on the road-progress-tracker-item\n * if the state of the step is current add the class `current` on the road-progress-tracker-item\n\n */\n\n@Component({\n  tag: 'road-progress-tracker',\n  styleUrl: 'progress-tracker.css',\n  shadow: true,\n})\nexport class ProgressTracker {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n               <slot/>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}
+{"file":"road-progress-tracker.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,kIAAkI;;MCgBhJ,eAAe;;;;EAEvB,MAAM;IAEJ,QACE,EAAC,IAAI,QACH,eACE,cACE,eAAO,CACJ,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/progress-tracker/progress-tracker.css?tag=road-progress-tracker&encapsulation=shadow","src/components/progress-tracker/progress-tracker.tsx"],"sourcesContent":["/*\n * Progress tracker\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n:host ul{\n  padding-left: 0;\n}\n\n/* PROGRESS TRACKER\n -------------------- */\n\n.progress-tracker {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  list-style: none;\n}\n\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the progress stepper tracker item, it should be road-progress-tracker-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-progress-tracker-item\n * if the state of the step is in progress add the class `in-progress` on the road-progress-tracker-item\n * if the state of the step is current add the class `current` on the road-progress-tracker-item\n\n */\n\n@Component({\n  tag: 'road-progress-tracker',\n  styleUrl: 'progress-tracker.css',\n  shadow: true,\n})\nexport class ProgressTracker {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n               <slot/>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}

package/dist/esm/road-progress.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const progressCss = ".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%}}";
 

package/dist/esm/road-progress.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,y4CAAy4C;;MCOh5C,WAAW;;;iBAME,CAAC;uBAKsB,GAAG;iBAKvB,EAAE;oBAKD,KAAK;qBAKF,KAAK;iBAKX,KAAK;qBAKA,KAAK;iBAK6D,SAAS;;EAEzG,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAC,CAAC,GAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,kCAAkC,GAAG,uBAAuB,CAAC;IAChG,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,yBAAyB,GAAG,UAAU,CAAC;IAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;IAEpD,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,IAC5B,WAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,IACxD,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,mBAAiB,IAAI,CAAC,KAAK,mBAAgB,GAAG,mBAAe,KAAK,GAAO,CACpJ,EACN,WAAK,KAAK,EAAE,GAAG,SAAS,EAAE,IACxB,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvD,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,uBAAuB,IAAE,UAAU,OAAG,IAAI,CAAC,WAAW,CAAQ,CACxF,CACD,EACP;GACH;;;;;;","names":[],"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\"></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"],"version":3}
+{"file":"road-progress.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,y4CAAy4C;;MCOh5C,WAAW;;;iBAME,CAAC;uBAKsB,GAAG;iBAKvB,EAAE;oBAKD,KAAK;qBAKF,KAAK;iBAKX,KAAK;qBAKA,KAAK;iBAK6D,SAAS;;EAEzG,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAC,CAAC,GAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,kCAAkC,GAAG,uBAAuB,CAAC;IAChG,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,yBAAyB,GAAG,UAAU,CAAC;IAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;IAEpD,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,IAC5B,WAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,IACxD,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,mBAAiB,IAAI,CAAC,KAAK,mBAAgB,GAAG,mBAAe,KAAK,GAAO,CACpJ,EACN,WAAK,KAAK,EAAE,GAAG,SAAS,EAAE,IACxB,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvD,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,uBAAuB,IAAE,UAAU,OAAG,IAAI,CAAC,WAAW,CAAQ,CACxF,CACD,EACP;GACH;;;;;;","names":[],"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\"></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"],"version":3}

package/dist/esm/road-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, H as Host, f as getElement } from './index-4b484f35.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
 
 const radioGroupCss = ".sc-road-radio-group-h{--asterisk-color:var(--road-on-surface);position:relative;display:block;margin-bottom:1rem}.asterisk.sc-road-radio-group{color:var(--asterisk-color)}.is-invalid.sc-road-radio-group-h .invalid-feedback.sc-road-radio-group{display:block}.invalid-feedback.sc-road-radio-group{display:none;flex:0 0 100%;width:100%;margin:0.5rem 0 0;font-size:var(--road-font-size-12);color:var(--road-on-danger-surface)}.helper.sc-road-radio-group{margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-on-surface-weak)}";
 

package/dist/esm/road-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"road-radio-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4hBAA4hB;;MCWriB,UAAU;;;;;IAkEb,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,aAAa,GAAG,EAAE,CAAC,MAAM,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;MACpF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAI,aAAsC,CAAC,KAAK,CAAC;QAC/D,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;aAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE;UACnC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;QACD,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF,CAAC;wBAvE6B,oBAAoB,aAAa,EAAE,EAAE;+BAKtC,KAAK;gBAKZ,IAAI,CAAC,YAAY;;;oBAeV,KAAK;qBAKQ,GAAG,IAAI,CAAC,YAAY,QAAQ;;;;EAavE,YAAY,CAAC,KAAsB;IACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACjC;EA4BD,YAAY;IACV,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACjD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;KAC3E;SAAM;MACL,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;KAC5E;GACF;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACjD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;KAC3E;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,YAAY,QAAQ,CAAC;IAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAEzF,QACE,EAAC,IAAI,IACH,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,cAAc,cAAc,EAAE,gBACzB,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,IAAI,SAAG,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,OAAO,IAAG,IAAI,CAAC,KAAK,OAAG,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAAK,EACvH,eAAO,EACN,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;GACH;;;;;;;AAGH,IAAI,aAAa,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio-group/radio-group.css?tag=road-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":["/*\n * Radio Group\n *\n * Index\n * - Radio Group\n * - Asterisk\n * - Error\n */\n\n/**\n * Error message for inline radio can only\n * be provided by adding a class\n * .is-invalid on the .form-group of this radio\n */\n\n/**\n * @prop --asterisk-color: color of the asterisk\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n  --asterisk-color: var(--road-on-surface);\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n}\n\n\n/* ASTERISK\n-------------------- */\n\n.asterisk {\n  color: var(--asterisk-color);\n}\n\n/* ERROR\n-------------------- */\n\n:host(.is-invalid) .invalid-feedback {\n  display: block;\n}\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin: 0.5rem 0 0;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-danger-surface);\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n/**\n * @slot  - Used to add multiple radio components.\n */\n\n@Component({\n  tag: 'road-radio-group',\n  styleUrl: 'radio-group.css',\n  scoped: true,\n})\nexport class RadioGroup {\n\n  @Element() el!: HTMLRoadRadioGroupElement;\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() radioGroupId: string = `road-radio-group-${radioGroupIds++}`;\n\n  /**\n   * If `true`, the radios can be deselected.\n   */\n  @Prop() allowEmptySelection = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioGroupId;\n\n  /**\n   * the value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string;\n\n  /**\n   * add an asterisk to the label of the field\n   */\n   @Prop() asterisk?: boolean = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop({reflect: true}) ariaLabel: string = `${this.radioGroupId}-label`;\n\n  /**\n   * Error message for the radio group\n   */\n  @Prop({ mutable: true }) error?: string;\n\n  /**\n   * Helper message for the radio group\n   */\n  @Prop() helper?: string;\n\n  @Watch('value')\n  valueChanged(value: any | undefined) {\n    this.roadchange.emit({ value });\n    this.roadChange.emit({ value });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  private onClick = (ev: Event) => {\n    const selectedRadio = ev.target && (ev.target as HTMLElement).closest('road-radio');\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = (selectedRadio as HTMLRoadRadioElement).value;\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else if (this.allowEmptySelection) {\n        this.value = undefined;\n      }\n      this.error = undefined;\n    }\n  };\n\n  @Watch('error')\n  errorChanged() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    } else {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    }\n  }\n\n  render() {\n    const labelId = `${this.radioGroupId}-label`;\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        class={`form-group ${isInvalidClass}`}\n        aria-label={this.ariaLabel}\n        onClick={this.onClick}\n      >\n        {this.label && <p class=\"text-content\" id={labelId}>{this.label} {this.asterisk && <span class=\"asterisk\">*</span>}</p>}\n        <slot/>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds = 0;\n"],"version":3}
+{"file":"road-radio-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4hBAA4hB;;MCWriB,UAAU;;;;;IAkEb,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,aAAa,GAAG,EAAE,CAAC,MAAM,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;MACpF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAI,aAAsC,CAAC,KAAK,CAAC;QAC/D,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;aAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE;UACnC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;QACD,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF,CAAC;wBAvE6B,oBAAoB,aAAa,EAAE,EAAE;+BAKtC,KAAK;gBAKZ,IAAI,CAAC,YAAY;;;oBAeV,KAAK;qBAKQ,GAAG,IAAI,CAAC,YAAY,QAAQ;;;;EAavE,YAAY,CAAC,KAAsB;IACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACjC;EA4BD,YAAY;IACV,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACjD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;KAC3E;SAAM;MACL,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;KAC5E;GACF;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACjD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;KAC3E;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,YAAY,QAAQ,CAAC;IAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAEzF,QACE,EAAC,IAAI,IACH,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,cAAc,cAAc,EAAE,gBACzB,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,IAAI,SAAG,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,OAAO,IAAG,IAAI,CAAC,KAAK,OAAG,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAAK,EACvH,eAAO,EACN,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;GACH;;;;;;;AAGH,IAAI,aAAa,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/radio-group/radio-group.css?tag=road-radio-group&encapsulation=scoped","src/components/radio-group/radio-group.tsx"],"sourcesContent":["/*\n * Radio Group\n *\n * Index\n * - Radio Group\n * - Asterisk\n * - Error\n */\n\n/**\n * Error message for inline radio can only\n * be provided by adding a class\n * .is-invalid on the .form-group of this radio\n */\n\n/**\n * @prop --asterisk-color: color of the asterisk\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n  --asterisk-color: var(--road-on-surface);\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n}\n\n\n/* ASTERISK\n-------------------- */\n\n.asterisk {\n  color: var(--asterisk-color);\n}\n\n/* ERROR\n-------------------- */\n\n:host(.is-invalid) .invalid-feedback {\n  display: block;\n}\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin: 0.5rem 0 0;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-danger-surface);\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n/**\n * @slot  - Used to add multiple radio components.\n */\n\n@Component({\n  tag: 'road-radio-group',\n  styleUrl: 'radio-group.css',\n  scoped: true,\n})\nexport class RadioGroup {\n\n  @Element() el!: HTMLRoadRadioGroupElement;\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() radioGroupId: string = `road-radio-group-${radioGroupIds++}`;\n\n  /**\n   * If `true`, the radios can be deselected.\n   */\n  @Prop() allowEmptySelection = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioGroupId;\n\n  /**\n   * the value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string;\n\n  /**\n   * add an asterisk to the label of the field\n   */\n   @Prop() asterisk?: boolean = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop({reflect: true}) ariaLabel: string = `${this.radioGroupId}-label`;\n\n  /**\n   * Error message for the radio group\n   */\n  @Prop({ mutable: true }) error?: string;\n\n  /**\n   * Helper message for the radio group\n   */\n  @Prop() helper?: string;\n\n  @Watch('value')\n  valueChanged(value: any | undefined) {\n    this.roadchange.emit({ value });\n    this.roadChange.emit({ value });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  private onClick = (ev: Event) => {\n    const selectedRadio = ev.target && (ev.target as HTMLElement).closest('road-radio');\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = (selectedRadio as HTMLRoadRadioElement).value;\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else if (this.allowEmptySelection) {\n        this.value = undefined;\n      }\n      this.error = undefined;\n    }\n  };\n\n  @Watch('error')\n  errorChanged() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    } else {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    }\n  }\n\n  render() {\n    const labelId = `${this.radioGroupId}-label`;\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        class={`form-group ${isInvalidClass}`}\n        aria-label={this.ariaLabel}\n        onClick={this.onClick}\n      >\n        {this.label && <p class=\"text-content\" id={labelId}>{this.label} {this.asterisk && <span class=\"asterisk\">*</span>}</p>}\n        <slot/>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds = 0;\n"],"version":3}

package/dist/esm/road-radio.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, e as createEvent, h, H as Host, f as getElement } from './index-4b484f35.js';
-import './polyfill-ab80527b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
+import './polyfill-dc7c89b2.js';
 
 const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label.sc-road-radio::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--road-grey-60);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio~.form-radio-label.sc-road-radio:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio:hover::after{background:var(--road-input-surface-variant)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::after,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::after{background:var(--road-grey-60)}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}";
 

package/dist/esm/road-radio.entry.js.map

@@ -1 +1 @@
-{"file":"road-radio.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+3FAA+3F;;MCQn4F,KAAK;;;;;;;IAER,eAAU,GAAqC,IAAI,CAAC;IAgGpD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OACrD;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;mBAvGwB,cAAc,QAAQ,EAAE,EAAE;mBAKxB,KAAK;gBAKV,IAAI,CAAC,OAAO;oBAKP,KAAK;oBAKL,KAAK;;iBAUT,GAAG,IAAI,CAAC,OAAO,QAAQ;mBAKpB,KAAK;;;kBAeN,IAAI;;EAgB9B,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzE,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;EAID,oBAAoB;IAClB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAkBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;IAC1D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,CAAC;IACtD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAE3D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,cAAc,WAAW,EAAE,IACtC,aACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,GAAG,IAAI,CAAC,OAAO,EAAE,qBACd,OAAO,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF,aAAO,KAAK,EAAE,oBAAoB,YAAY,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAS,CACrG,EACP;GACH;;;AAGH,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio/radio.css?tag=road-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["/*\n * Radio\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Radio\n * - Label\n * - Error\n * - Position\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Inline radio\n */\n\n:host(.form-radio-inline) {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n}\n\n/**\n * Hide input\n */\n\n.form-radio-input {\n  position: absolute;\n  z-index: -1;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n}\n\n.form-radio-input:disabled {\n  z-index: 1;\n  width: 100%;\n  cursor: not-allowed;\n}\n\n/* LABEL\n -------------------- */\n\n.form-radio-label {\n  position: relative;\n  display: inline-flex;\n  align-items: flex-start;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-radio-label::before {\n  box-sizing: border-box;\n  display: block;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0.1rem 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 50%;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.form-radio-label::after {\n  position: absolute;\n  top: 0.285rem;\n  left: 0.1875rem;\n  box-sizing: border-box;\n  display: block;\n  width: 0.875rem;\n  height: 0.875rem;\n  content: \"\";\n  background: var(--road-grey-60);\n  border: none;\n  border-radius: 50%;\n  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: scale(0);\n  transform-origin: 50% 50%;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-radio-input ~ .form-radio-label:hover::before {\n    border-color: var(--road-input-surface);\n  }\n\n  .form-radio-input:checked ~ .form-radio-label:hover::after {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-radio-input:checked ~ .form-radio-label::after {\n  background: var(--road-input-surface);\n  opacity: 1;\n  transform: scale(1);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-radio-input.focus-visible ~ .form-radio-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);\n}\n\n.form-radio-input.focus-visible:checked ~ .form-radio-label::after {\n  background: var(--road-primary-700);\n}\n\n/**\n * Disabled state\n */\n\n.form-radio-input:disabled ~ .form-radio-label,\n.form-radio-input[readonly] ~ .form-radio-label {\n  cursor: not-allowed;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::before,\n.form-radio-input[readonly] ~ .form-radio-label::before {\n  background: var(--road-on-surface-disabled);\n  border: none;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::after,\n.form-radio-input[readonly] ~ .form-radio-label::after {\n  background: var(--road-grey-60);\n}\n\n/* ERROR\n -------------------- */\n\n.form-radio-input.is-invalid ~ .form-radio-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n/* POSITION\n -------------------- */\n\n.form-radio-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-radio-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-radio-inverse::after {\n  right: 0.1875rem;\n  left: auto;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n  tag: 'road-radio',\n  styleUrl: 'radio.css',\n  scoped: true,\n})\nexport class Radio {\n\n  private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n  @Element() el!: HTMLRoadRadioElement;\n\n  /**\n   * The id of radio\n   */\n  @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n  /**\n   * If `true`, the radio is selected.\n   */\n  @State() checked: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the radio.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.radioId}-label`;\n\n  /**\n   * If `true`, the label and the radio are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Inline multiple radio\n   */\n  @Prop() inline: boolean = true;\n\n  /**\n   * Emitted when the radio button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.radioId;\n    }\n    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      this.radioGroup = null;\n    }\n  }\n\n  @Listen('roadChange', {target: 'window'})\n  @Listen('roadchange', {target: 'window'})\n  onRoadChangedChanged() {\n    this.updateState();\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.radioId + '-label';\n    const inverseClass = this.inverse && 'form-radio-inverse';\n    const isInvalidClass = this.error ? 'is-invalid' : '';\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <input\n          class={`form-radio-input ${isInvalidClass}`}\n          type=\"radio\"\n          id={this.radioId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          checked={this.checked}\n          aria-checked={`${this.checked}`}\n          aria-labelledby={labelId}\n          value={this.value}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label}</label>\n      </Host>\n    );\n  }\n}\n\nlet radioIds = 0;\n"],"version":3}
+{"file":"road-radio.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+3FAA+3F;;MCQn4F,KAAK;;;;;;;IAER,eAAU,GAAqC,IAAI,CAAC;IAgGpD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OACrD;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;mBAvGwB,cAAc,QAAQ,EAAE,EAAE;mBAKxB,KAAK;gBAKV,IAAI,CAAC,OAAO;oBAKP,KAAK;oBAKL,KAAK;;iBAUT,GAAG,IAAI,CAAC,OAAO,QAAQ;mBAKpB,KAAK;;;kBAeN,IAAI;;EAgB9B,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzE,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;EAID,oBAAoB;IAClB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAkBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;IAC1D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,CAAC;IACtD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAE3D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,cAAc,WAAW,EAAE,IACtC,aACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,GAAG,IAAI,CAAC,OAAO,EAAE,qBACd,OAAO,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF,aAAO,KAAK,EAAE,oBAAoB,YAAY,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAS,CACrG,EACP;GACH;;;AAGH,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/radio/radio.css?tag=road-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * Radio\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Radio\n * - Label\n * - Error\n * - Position\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Inline radio\n */\n\n:host(.form-radio-inline) {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n}\n\n/**\n * Hide input\n */\n\n.form-radio-input {\n  position: absolute;\n  z-index: -1;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n}\n\n.form-radio-input:disabled {\n  z-index: 1;\n  width: 100%;\n  cursor: not-allowed;\n}\n\n/* LABEL\n -------------------- */\n\n.form-radio-label {\n  position: relative;\n  display: inline-flex;\n  align-items: flex-start;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-radio-label::before {\n  box-sizing: border-box;\n  display: block;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0.1rem 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 50%;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.form-radio-label::after {\n  position: absolute;\n  top: 0.285rem;\n  left: 0.1875rem;\n  box-sizing: border-box;\n  display: block;\n  width: 0.875rem;\n  height: 0.875rem;\n  content: \"\";\n  background: var(--road-grey-60);\n  border: none;\n  border-radius: 50%;\n  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: scale(0);\n  transform-origin: 50% 50%;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-radio-input ~ .form-radio-label:hover::before {\n    border-color: var(--road-input-surface);\n  }\n\n  .form-radio-input:checked ~ .form-radio-label:hover::after {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-radio-input:checked ~ .form-radio-label::after {\n  background: var(--road-input-surface);\n  opacity: 1;\n  transform: scale(1);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-radio-input.focus-visible ~ .form-radio-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);\n}\n\n.form-radio-input.focus-visible:checked ~ .form-radio-label::after {\n  background: var(--road-primary-700);\n}\n\n/**\n * Disabled state\n */\n\n.form-radio-input:disabled ~ .form-radio-label,\n.form-radio-input[readonly] ~ .form-radio-label {\n  cursor: not-allowed;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::before,\n.form-radio-input[readonly] ~ .form-radio-label::before {\n  background: var(--road-on-surface-disabled);\n  border: none;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::after,\n.form-radio-input[readonly] ~ .form-radio-label::after {\n  background: var(--road-grey-60);\n}\n\n/* ERROR\n -------------------- */\n\n.form-radio-input.is-invalid ~ .form-radio-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n/* POSITION\n -------------------- */\n\n.form-radio-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-radio-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-radio-inverse::after {\n  right: 0.1875rem;\n  left: auto;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n  tag: 'road-radio',\n  styleUrl: 'radio.css',\n  scoped: true,\n})\nexport class Radio {\n\n  private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n  @Element() el!: HTMLRoadRadioElement;\n\n  /**\n   * The id of radio\n   */\n  @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n  /**\n   * If `true`, the radio is selected.\n   */\n  @State() checked: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the radio.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.radioId}-label`;\n\n  /**\n   * If `true`, the label and the radio are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Inline multiple radio\n   */\n  @Prop() inline: boolean = true;\n\n  /**\n   * Emitted when the radio button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.radioId;\n    }\n    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      this.radioGroup = null;\n    }\n  }\n\n  @Listen('roadChange', {target: 'window'})\n  @Listen('roadchange', {target: 'window'})\n  onRoadChangedChanged() {\n    this.updateState();\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.radioId + '-label';\n    const inverseClass = this.inverse && 'form-radio-inverse';\n    const isInvalidClass = this.error ? 'is-invalid' : '';\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <input\n          class={`form-radio-input ${isInvalidClass}`}\n          type=\"radio\"\n          id={this.radioId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          checked={this.checked}\n          aria-checked={`${this.checked}`}\n          aria-labelledby={labelId}\n          value={this.value}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label}</label>\n      </Host>\n    );\n  }\n}\n\nlet radioIds = 0;\n"],"version":3}

package/dist/esm/road-range.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, e as createEvent, h, f as getElement } from './index-4b484f35.js';
-import { h as navigationAddMoreSolid, i as navigationAddLessSolid } from './index-8f45025b.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-52302079.js';
+import { h as navigationAddMoreSolid, i as navigationAddLessSolid } from './index-891decf5.js';
 
 const rangeCss = ".sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;-moz-appearance:none;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:\"\";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:\"\";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);-moz-appearance:none;appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}";
 

package/dist/esm/road-range.entry.js.map

@@ -1 +1 @@
-{"file":"road-range.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,m9EAAm9E;;MCyBv9E,KAAK;;;;;IAuER,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;MACD,IAAG,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAClD,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;OACvD;KACF,CAAC;mBAxEwB,cAAc,QAAQ,EAAE,EAAE;iBAKM,EAAE;;;;qBAqB/B,KAAK;oBAKN,KAAK;sBAKA,KAAK;;;;;EAM5B,YAAY;IACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACzF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GAC1F;EAaO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACrB,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GACnC;EAYD,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;IAElE,QACE,WAAK,KAAK,EAAC,mCAAmC,IAC3C,IAAI,CAAC,QAAQ,IAAI,iBAAW,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAa,EAC9F,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,IACrF,IAAI,CAAC,SAAS,IAAI,iBAAiB,EACnC,IAAI,CAAC,UAAU,IAAI,YAAM,IAAI,EAAC,UAAU,GAAE,EAC3C,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,QAAQ,GAEd,EACF,WAAK,KAAK,EAAC,qBAAqB,GAAO,CACnC,EACL,IAAI,CAAC,QAAQ,IAAI,iBAAW,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAa,CAC1F,EACN;GACH;;;;;;AAIH,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/range/range.css?tag=road-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            \n          />\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"version":3}
+{"file":"road-range.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,m9EAAm9E;;MCyBv9E,KAAK;;;;;IAuER,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;MACD,IAAG,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAClD,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;OACvD;KACF,CAAC;mBAxEwB,cAAc,QAAQ,EAAE,EAAE;iBAKM,EAAE;;;;qBAqB/B,KAAK;oBAKN,KAAK;sBAKA,KAAK;;;;;EAM5B,YAAY;IACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACzF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GAC1F;EAaO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACrB,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GACnC;EAYD,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;IAElE,QACE,WAAK,KAAK,EAAC,mCAAmC,IAC3C,IAAI,CAAC,QAAQ,IAAI,iBAAW,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAa,EAC9F,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,IACrF,IAAI,CAAC,SAAS,IAAI,iBAAiB,EACnC,IAAI,CAAC,UAAU,IAAI,YAAM,IAAI,EAAC,UAAU,GAAE,EAC3C,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,QAAQ,GAEd,EACF,WAAK,KAAK,EAAC,qBAAqB,GAAO,CACnC,EACL,IAAI,CAAC,QAAQ,IAAI,iBAAW,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAa,CAC1F,EACN;GACH;;;;;;AAIH,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            \n          />\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"version":3}

package/dist/esm/road-rating.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
-import { s as star, j as starHalfColor } from './index-8f45025b.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
+import { s as star, j as starHalfColor } from './index-891decf5.js';
 
 const ratingCss = ":host{display:flex;align-items:center}.rating-stars{display:inline-flex;flex-shrink:0}.rating-star{color:var(--road-surface-disabled)}.rating-stars.rating-stars--small .icon-sm{width:1rem;height:1rem}.rating-number{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}.rating-number.rating-number--small{font-size:var(--road-link-small)}";
 

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

@@ -1 +1 @@
-{"file":"road-rating.entry.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,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpB,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5B,iBAAW,IAAI,EAAE,aAAa,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,MACvC,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,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":[],"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.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,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpB,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5B,iBAAW,IAAI,EAAE,aAAa,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,MACvC,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,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":[],"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/esm/road-segmented-button-bar.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, e as createEvent, h, H as Host, f as getElement } from './index-4b484f35.js';
-import './polyfill-ab80527b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
+import './polyfill-dc7c89b2.js';
 
 const segmentedButtonBarCss = ":host{display:flex;max-width:500px}";