@roadtrip/components 3.11.0 → 3.11.1

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, e as createEvent, h, H as Host } from './index-4b484f35.js';
-import { c as checkWide, b as navigationAddLess } from './index-8f45025b.js';
-import './polyfill-ab80527b.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6f4c3286.js';
+import { c as checkWide, b as navigationAddLess } from './index-891decf5.js';
+import './polyfill-dc7c89b2.js';
 
 const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;font-size:0.75rem;color:var(--road-grey-500)}";
 

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

@@ -1 +1 @@
-{"file":"road-checkbox.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,64HAA64H;;MCcp5H,QAAQ;;;;;;;;;IAgGX,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B,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;sBAxG2B,iBAAiB,WAAW,EAAE,EAAE;gBAKtC,IAAI,CAAC,UAAU;oBAKV,KAAK;mBAKE,KAAK;yBAKN,KAAK;oBAKX,KAAK;iBAKT,IAAI;iBAKJ,GAAG,IAAI,CAAC,UAAU,QAAQ;mBAKvB,KAAK;;;;EAwChC,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAiBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,uBAAuB,CAAC;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAE1G,QACE,EAAC,IAAI,QACH,aACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,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,UAAU,IACrF,eACG,IAAI,CAAC,KAAK,EAAC,eAAO,CACf,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,iBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,SAAS,GAAc,EACvG,IAAI,CAAC,aAAa,IAAI,iBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,iBAAiB,GAAc,CACzF,EACP,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,WAAW,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/checkbox/checkbox.css?tag=road-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\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 * - Checkbox\n * - Label\n * - Error\n * - Helper\n * - Position\n */\n\n\n/* CHECKBOX\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-font-size-16);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-check-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-check-label {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-check-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 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;\n}\n\n.form-check-icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--road-primary-contrast);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {\n    border-color: var(--road-input-surface-variant);\n  }\n\n  .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,\n  .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-check-input:checked ~ .form-check-label .form-check-icon,\n.form-check-input:indeterminate ~ .form-check-label .form-check-icon {\n  opacity: 1;\n}\n\n.form-check-input:checked ~ .form-check-label::before,\n.form-check-input:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface);\n  border-color: var(--road-input-surface);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-check-input.focus-visible ~ .form-check-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n.form-check-input.focus-visible:checked ~ .form-check-label::before,\n.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface-variant);\n  border-color: var(--road-input-surface-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-check-input:disabled ~ .form-check-label,\n.form-check-input[readonly] ~ .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-check-input:disabled ~ .form-check-label::before,\n.form-check-input[readonly] ~ .form-check-label::before {\n  background: var(--road-surface-disabled);\n  border: none;\n}\n\n.form-check-input:disabled ~ .form-check-label .form-check-icon,\n.form-check-input[readonly] ~ .form-check-label .form-check-icon {\n  fill: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-danger-default);\n}\n\n.form-check-input.is-invalid ~ .form-check-label::before,\n.was-validated .form-check-input:invalid ~ .form-check-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n.form-check-input.is-invalid ~ .invalid-feedback,\n.was-validated .form-check-input:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* POSITION\n -------------------- */\n\n.form-checkbox-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-checkbox-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-checkbox-inverse .form-check-icon {\n  right: 0;\n  left: auto;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\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 checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\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.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label}<slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\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 checkboxIds = 0;\n"],"version":3}
+{"file":"road-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=road-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\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 * - Checkbox\n * - Label\n * - Error\n * - Helper\n * - Position\n */\n\n\n/* CHECKBOX\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-font-size-16);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-check-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-check-label {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-check-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 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;\n}\n\n.form-check-icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--road-primary-contrast);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {\n    border-color: var(--road-input-surface-variant);\n  }\n\n  .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,\n  .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-check-input:checked ~ .form-check-label .form-check-icon,\n.form-check-input:indeterminate ~ .form-check-label .form-check-icon {\n  opacity: 1;\n}\n\n.form-check-input:checked ~ .form-check-label::before,\n.form-check-input:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface);\n  border-color: var(--road-input-surface);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-check-input.focus-visible ~ .form-check-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n.form-check-input.focus-visible:checked ~ .form-check-label::before,\n.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface-variant);\n  border-color: var(--road-input-surface-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-check-input:disabled ~ .form-check-label,\n.form-check-input[readonly] ~ .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-check-input:disabled ~ .form-check-label::before,\n.form-check-input[readonly] ~ .form-check-label::before {\n  background: var(--road-surface-disabled);\n  border: none;\n}\n\n.form-check-input:disabled ~ .form-check-label .form-check-icon,\n.form-check-input[readonly] ~ .form-check-label .form-check-icon {\n  fill: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-danger-default);\n}\n\n.form-check-input.is-invalid ~ .form-check-label::before,\n.was-validated .form-check-input:invalid ~ .form-check-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n.form-check-input.is-invalid ~ .invalid-feedback,\n.was-validated .form-check-input:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* POSITION\n -------------------- */\n\n.form-checkbox-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-checkbox-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-checkbox-inverse .form-check-icon {\n  right: 0;\n  left: auto;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\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 checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\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.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label}<slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\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 checkboxIds = 0;\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
-import { a as navigationClose } from './index-8f45025b.js';
-import './polyfill-ab80527b.js';
+import { r as registerInstance, h, H as Host } from './index-6f4c3286.js';
+import { a as navigationClose } from './index-891decf5.js';
+import './polyfill-dc7c89b2.js';
 
 const chipCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-surface-inverse);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";
 

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

@@ -1 +1 @@
-{"file":"road-chip.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,iyDAAiyD;;MCapyD,IAAI;;;iBAI2B,SAAS;mBAKxB,KAAK;gBAKJ,IAAI;wBAKA,KAAK;;EAErC,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,cAAc,GAAG,EAAE,CAAC;IAExD,QACE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,YAAY,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE,IAE7D,WAAK,KAAK,EAAC,kBAAkB,IAC3B,eAAO,CACH,EACL,IAAI,CAAC,YAAY,IAAI,iBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,eAAe,GAAc,CAClF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/chip/chip.css?tag=road-chip&encapsulation=shadow","./src/components/chip/chip.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Outline\n * - Icon\n * - Close\n * - Size\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  padding: 0.25rem 0.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 0.5rem;\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.chip-outline) {\n  border-style: solid;\n  border-width: 1px;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.chip-close {\n  width: 1rem;\n  height: 1rem;\n  margin-right: -0.25rem;\n  color: var(--road-surface);\n  background: var(--road-on-surface-weak);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/* SIZE\n -------------------- */\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  margin-left: -0.75rem;\n}\n\n:host(.chip-lg) .chip-description {\n  padding: 0 0.75rem;\n}\n\n:host(.chip-lg) .chip-close {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.chip-default) {\n  color: var(--road-on-surface);\n  background: var(--road-grey-200);\n}\n\n:host(.chip-outline.chip-default) {\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.chip-secondary) {\n  color: var(--road-surface-inverse);\n  background: var(--road-button-primary);\n  border-color: transparent;\n}\n\n:host(.chip-secondary) .chip-close {\n  color: var(--road-primary);\n  background: var(--road-surface);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class Chip {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'default' | 'secondary' = 'default';\n\n  /**\n   * Display an outline style chip.\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /**\n   * Display a close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  render() {\n    const outlineClass = this.outline ? 'chip-outline' : '';\n\n    return (\n      <Host\n        class={`${outlineClass} chip-${this.color} chip-${this.size}`}\n      >\n        <div class=\"chip-description\">\n          <slot/>\n        </div>\n        {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-chip.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,iyDAAiyD;;MCapyD,IAAI;;;iBAI2B,SAAS;mBAKxB,KAAK;gBAKJ,IAAI;wBAKA,KAAK;;EAErC,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,cAAc,GAAG,EAAE,CAAC;IAExD,QACE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,YAAY,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE,IAE7D,WAAK,KAAK,EAAC,kBAAkB,IAC3B,eAAO,CACH,EACL,IAAI,CAAC,YAAY,IAAI,iBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,eAAe,GAAc,CAClF,EACP;GACH;;;;;;","names":[],"sources":["src/components/chip/chip.css?tag=road-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Outline\n * - Icon\n * - Close\n * - Size\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  padding: 0.25rem 0.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 0.5rem;\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.chip-outline) {\n  border-style: solid;\n  border-width: 1px;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.chip-close {\n  width: 1rem;\n  height: 1rem;\n  margin-right: -0.25rem;\n  color: var(--road-surface);\n  background: var(--road-on-surface-weak);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/* SIZE\n -------------------- */\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  margin-left: -0.75rem;\n}\n\n:host(.chip-lg) .chip-description {\n  padding: 0 0.75rem;\n}\n\n:host(.chip-lg) .chip-close {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.chip-default) {\n  color: var(--road-on-surface);\n  background: var(--road-grey-200);\n}\n\n:host(.chip-outline.chip-default) {\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.chip-secondary) {\n  color: var(--road-surface-inverse);\n  background: var(--road-button-primary);\n  border-color: transparent;\n}\n\n:host(.chip-secondary) .chip-close {\n  color: var(--road-primary);\n  background: var(--road-surface);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class Chip {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'default' | 'secondary' = 'default';\n\n  /**\n   * Display an outline style chip.\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /**\n   * Display a close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  render() {\n    const outlineClass = this.outline ? 'chip-outline' : '';\n\n    return (\n      <Host\n        class={`${outlineClass} chip-${this.color} chip-${this.size}`}\n      >\n        <div class=\"chip-description\">\n          <slot/>\n        </div>\n        {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/road-collapse.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-6f4c3286.js';
 
 const collapseCss = ":host{--btn-margin-bottom:1rem;--btn-padding-start:1rem;--btn-padding-end:1rem;--btn-font-size:1rem;--max-height:500px;display:block}.collapsed-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease-in-out}.collapse-open{max-height:var(--max-height)}.collapse-btn{--margin-bottom:var(--btn-margin-bottom);--border-radius:var(--btn-border-radius);--padding-start:var(--btn-padding-start);--padding-end:var(--btn-padding-end);--font-size:var(--btn-font-size)}.collapse-btn-centered{display:flex;justify-content:center}";
 

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

@@ -1 +1 @@
-{"file":"road-collapse.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ohBAAohB;;MCY3hB,QAAQ;;;;;;IAyBX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;oBAKrB,WAAW;oBAKX,WAAW;oBAKX,KAAK;;EASjC,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,EAAE,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAE,QAAQ,CAAC;IAChE,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,GAAG,uBAAuB,GAAG,EAAE,CAAC;IAEjE,QACE,EAAC,IAAI,QACH,eAAO,EACP,WAAK,KAAK,EAAE,qBAAqB,WAAW,EAAE,IAC5C,YAAM,IAAI,EAAC,mBAAmB,GAAE,CAC5B,EACN,WAAK,KAAK,EAAE,wBAAwB,WAAW,EAAE,IAC/C,mBAAa,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,uBAAuB,IAAE,UAAU,CAAe,CACxF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/collapse/collapse.css?tag=road-collapse&encapsulation=shadow","./src/components/collapse/collapse.tsx"],"sourcesContent":["/*\n * Collapse\n *\n * Index\n * - Collapse\n * - Content\n * - Button\n */\n\n/**\n * @prop --btn-padding-start: Left padding  of the button\n * @prop --btn-padding-end: Right padding of the button\n * @prop --btn-margin-bottom: Bottom margin of the button\n * @prop --btn-font-size: Font size of the text button\n * @prop --max-height: maximum height of the collapse content\n */\n\n/* COLLAPSE\n -------------------- */\n\n:host {\n  --btn-margin-bottom: 1rem;\n  --btn-padding-start: 1rem;\n  --btn-padding-end: 1rem;\n  --btn-font-size: 1rem;\n  --max-height: 500px;\n\n  display: block;\n}\n\n/* CONTENT\n -------------------- */\n\n.collapsed-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.4s ease-in-out;\n}\n\n/**\n * Open state\n */\n\n.collapse-open {\n  max-height: var(--max-height);\n}\n\n/* BUTTON\n -------------------- */\n\n.collapse-btn {\n  --margin-bottom: var(--btn-margin-bottom);\n  --border-radius: var(--btn-border-radius);\n  --padding-start: var(--btn-padding-start);\n  --padding-end: var(--btn-padding-end);\n  --font-size: var(--btn-font-size);\n}\n\n.collapse-btn-centered {\n  display: flex;\n  justify-content: center;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content visible when collapsed.\n * @slot collapsed-content - content not visible when collapsed.\n */\n\n@Component({\n  tag: 'road-collapse',\n  styleUrl: 'collapse.css',\n  shadow: true,\n})\nexport class Collapse {\n\n  /**\n   * Set to `true` to display the collapsed part and to `false` to hide it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Text displayed in the button when the content is collapsed\n   */\n  @Prop() showMore : string = 'show more';\n\n  /**\n   * Text displayed in the button when the content is not collapsed\n   */\n  @Prop() showLess : string = 'show less';\n\n  /**\n   * if `true` the button will be centered\n   */\n  @Prop() centered: boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const isOpenClass = this.isOpen ? 'collapse-open' : '';\n    const buttonText = this.isOpen ? this.showLess : this .showMore;\n    const centerClass = this.centered ? 'collapse-btn-centered' : '';\n\n    return (\n      <Host>\n        <slot/>\n        <div class={`collapsed-content ${isOpenClass}`}>\n          <slot name=\"collapsed-content\"/>\n        </div>\n        <div class={`collapse-btn-wrapper ${centerClass}`}>\n          <road-button onClick={this.onClick} class=\"collapse-btn btn-link\">{buttonText}</road-button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-collapse.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ohBAAohB;;MCY3hB,QAAQ;;;;;;IAyBX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;oBAKrB,WAAW;oBAKX,WAAW;oBAKX,KAAK;;EASjC,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,EAAE,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAE,QAAQ,CAAC;IAChE,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,GAAG,uBAAuB,GAAG,EAAE,CAAC;IAEjE,QACE,EAAC,IAAI,QACH,eAAO,EACP,WAAK,KAAK,EAAE,qBAAqB,WAAW,EAAE,IAC5C,YAAM,IAAI,EAAC,mBAAmB,GAAE,CAC5B,EACN,WAAK,KAAK,EAAE,wBAAwB,WAAW,EAAE,IAC/C,mBAAa,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,uBAAuB,IAAE,UAAU,CAAe,CACxF,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/collapse/collapse.css?tag=road-collapse&encapsulation=shadow","src/components/collapse/collapse.tsx"],"sourcesContent":["/*\n * Collapse\n *\n * Index\n * - Collapse\n * - Content\n * - Button\n */\n\n/**\n * @prop --btn-padding-start: Left padding  of the button\n * @prop --btn-padding-end: Right padding of the button\n * @prop --btn-margin-bottom: Bottom margin of the button\n * @prop --btn-font-size: Font size of the text button\n * @prop --max-height: maximum height of the collapse content\n */\n\n/* COLLAPSE\n -------------------- */\n\n:host {\n  --btn-margin-bottom: 1rem;\n  --btn-padding-start: 1rem;\n  --btn-padding-end: 1rem;\n  --btn-font-size: 1rem;\n  --max-height: 500px;\n\n  display: block;\n}\n\n/* CONTENT\n -------------------- */\n\n.collapsed-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.4s ease-in-out;\n}\n\n/**\n * Open state\n */\n\n.collapse-open {\n  max-height: var(--max-height);\n}\n\n/* BUTTON\n -------------------- */\n\n.collapse-btn {\n  --margin-bottom: var(--btn-margin-bottom);\n  --border-radius: var(--btn-border-radius);\n  --padding-start: var(--btn-padding-start);\n  --padding-end: var(--btn-padding-end);\n  --font-size: var(--btn-font-size);\n}\n\n.collapse-btn-centered {\n  display: flex;\n  justify-content: center;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content visible when collapsed.\n * @slot collapsed-content - content not visible when collapsed.\n */\n\n@Component({\n  tag: 'road-collapse',\n  styleUrl: 'collapse.css',\n  shadow: true,\n})\nexport class Collapse {\n\n  /**\n   * Set to `true` to display the collapsed part and to `false` to hide it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Text displayed in the button when the content is collapsed\n   */\n  @Prop() showMore : string = 'show more';\n\n  /**\n   * Text displayed in the button when the content is not collapsed\n   */\n  @Prop() showLess : string = 'show less';\n\n  /**\n   * if `true` the button will be centered\n   */\n  @Prop() centered: boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const isOpenClass = this.isOpen ? 'collapse-open' : '';\n    const buttonText = this.isOpen ? this.showLess : this .showMore;\n    const centerClass = this.centered ? 'collapse-btn-centered' : '';\n\n    return (\n      <Host>\n        <slot/>\n        <div class={`collapsed-content ${isOpenClass}`}>\n          <slot name=\"collapsed-content\"/>\n        </div>\n        <div class={`collapse-btn-wrapper ${centerClass}`}>\n          <road-button onClick={this.onClick} class=\"collapse-btn btn-link\">{buttonText}</road-button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/road-dialog.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 { a as navigationClose, d as alertInfoOutline, e as alertDangerOutline, f as alertWarningOutline, g as alertSuccessOutline } from './index-8f45025b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-6f4c3286.js';
+import { a as navigationClose, d as alertInfoOutline, e as alertDangerOutline, f as alertWarningOutline, g as alertSuccessOutline } from './index-891decf5.js';
 
 const dialogCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.dialog-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;background:var(--road-overlay)}:host(.dialog-has-close) .dialog-overlay{cursor:pointer}.dialog-modal{position:relative;width:auto;margin:1rem;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.dialog-open){visibility:visible !important;opacity:1}:host(.dialog-open) .dialog-modal{transform:none}.dialog-content{position:relative;display:flex;flex-direction:column;width:100%;padding:0 0 1.5rem;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;border-radius:0.25rem;outline:0;box-shadow:var(--road-elevation-highest)}@media (min-width: 576px){.dialog-content{max-width:454px}}.dialog-header{display:flex;align-items:center;justify-content:flex-end;height:100%;max-height:2.75rem;margin-bottom:2rem}.dialog-close{display:flex;align-items:center;align-self:flex-start;justify-content:center;width:3.5rem;height:3.5rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.dialog-icon{display:inline-block;width:3rem;height:3rem;font-size:var(--road-font-size-48)}.dialog-body{padding:0 1.5rem;text-align:center}@media (min-width: 768px){.dialog-body{padding:0 3rem}}.dialog-title{padding:0;margin:0 0 1rem;font-size:var(--road-body-medium);font-weight:700;line-height:1.2}.dialog-description{margin:0 0 0.5rem;overflow:auto;font-size:var(--road-body-medium)}.dialog-footer{display:flex;justify-content:center;padding:0 1.5rem}.dialog-footer ::slotted(road-button){margin-top:1rem}.dialog-footer .btn{min-width:130px;max-width:calc(50% - 0.5rem)}";
 

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

@@ -1 +1 @@
-{"file":"road-dialog.entry.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * Dialog\n *\n * Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n */\n\n/**\n * @prop --z-index: The z-index of the Dialog.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.dialog-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n  cursor: pointer;\n}\n\n/* DIALOG\n -------------------- */\n\n.dialog-modal {\n  position: relative;\n  width: auto;\n  margin: 1rem;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.dialog-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 0 1.5rem;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  border-radius: 0.25rem;\n  outline: 0;\n  box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n  .dialog-content {\n    max-width: 454px;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  max-height: 2.75rem;\n  margin-bottom: 2rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.dialog-close {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n  display: inline-block;\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--road-font-size-48);\n}\n\n/* BODY\n -------------------- */\n\n.dialog-body {\n  padding: 0 1.5rem;\n  text-align: center;\n}\n\n@media (min-width: 768px) {\n\n  .dialog-body {\n    padding: 0 3rem;\n  }\n}\n\n/* TITLE\n -------------------- */\n\n.dialog-title {\n  padding: 0;\n  margin: 0 0 1rem;\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.dialog-description {\n  margin: 0 0 0.5rem;\n  overflow: auto;\n  font-size: var(--road-body-medium);\n}\n\n/* FOOTER\n -------------------- */\n\n.dialog-footer {\n  display: flex;\n  justify-content: center;\n  padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n  margin-top: 1rem;\n}\n\n/**\n * Footer buttons\n */\n\n.dialog-footer .btn {\n  min-width: 130px;\n  max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot  - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n  tag: 'road-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n\n  /**\n   * Current reference of the dialog\n   */\n  @Element() el!: HTMLRoadDialogElement;\n\n  /**\n   * Set isOpen property to true to open the dialog\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Show / hide the close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Set the color of information dialog. e.g. info, success, warning, danger\n   */\n  @Prop() color?: FeedbackColors;\n\n  /**\n   * override default icon\n   */\n   @Prop() icon?: string;\n\n  /**\n   * Text to the top\n   */\n  @Prop() label?: string;\n\n  /**\n   * Content description of the dialog\n   */\n  @Prop() description?: string;\n\n  /**\n   * Indicate when closing the dialog\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the dialog\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if ((event.key === 'Escape' || event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n    const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n    let icon;\n\n    if(this.icon) {\n      icon = this.icon;\n    } else {\n      switch(this.color) {\n      case 'info':\n        icon = alertInfoOutline;\n        break;\n      case 'success':\n        icon = alertSuccessOutline;\n        break;\n      case 'warning':\n        icon = alertWarningOutline;\n        break;\n      case 'danger':\n        icon = alertDangerOutline;\n        break;\n      default:\n        icon = alertInfoOutline;\n        break;\n      }\n    }\n\n    return (\n      <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-labelledby=\"dialogLabel\" aria-describedby=\"dialogDesc\">\n        <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n        <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n          <div class=\"dialog-content\">\n            <header class=\"dialog-header\">\n              {this.hasCloseIcon\n                ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n                : ''}\n            </header>\n            <div class=\"dialog-body\">\n              {this.color !== undefined\n                ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n                : ''}\n              <h2 class=\"dialog-title\" id=\"dialogLabel\">{this.label}</h2>\n              <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n            </div>\n            <footer class=\"dialog-footer\">\n              <slot/>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * Dialog\n *\n * Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n */\n\n/**\n * @prop --z-index: The z-index of the Dialog.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.dialog-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n  cursor: pointer;\n}\n\n/* DIALOG\n -------------------- */\n\n.dialog-modal {\n  position: relative;\n  width: auto;\n  margin: 1rem;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.dialog-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 0 1.5rem;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  border-radius: 0.25rem;\n  outline: 0;\n  box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n  .dialog-content {\n    max-width: 454px;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  max-height: 2.75rem;\n  margin-bottom: 2rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.dialog-close {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n  display: inline-block;\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--road-font-size-48);\n}\n\n/* BODY\n -------------------- */\n\n.dialog-body {\n  padding: 0 1.5rem;\n  text-align: center;\n}\n\n@media (min-width: 768px) {\n\n  .dialog-body {\n    padding: 0 3rem;\n  }\n}\n\n/* TITLE\n -------------------- */\n\n.dialog-title {\n  padding: 0;\n  margin: 0 0 1rem;\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.dialog-description {\n  margin: 0 0 0.5rem;\n  overflow: auto;\n  font-size: var(--road-body-medium);\n}\n\n/* FOOTER\n -------------------- */\n\n.dialog-footer {\n  display: flex;\n  justify-content: center;\n  padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n  margin-top: 1rem;\n}\n\n/**\n * Footer buttons\n */\n\n.dialog-footer .btn {\n  min-width: 130px;\n  max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot  - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n  tag: 'road-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n\n  /**\n   * Current reference of the dialog\n   */\n  @Element() el!: HTMLRoadDialogElement;\n\n  /**\n   * Set isOpen property to true to open the dialog\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Show / hide the close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Set the color of information dialog. e.g. info, success, warning, danger\n   */\n  @Prop() color?: FeedbackColors;\n\n  /**\n   * override default icon\n   */\n   @Prop() icon?: string;\n\n  /**\n   * Text to the top\n   */\n  @Prop() label?: string;\n\n  /**\n   * Content description of the dialog\n   */\n  @Prop() description?: string;\n\n  /**\n   * Indicate when closing the dialog\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the dialog\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if ((event.key === 'Escape' || event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n    const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n    let icon;\n\n    if(this.icon) {\n      icon = this.icon;\n    } else {\n      switch(this.color) {\n      case 'info':\n        icon = alertInfoOutline;\n        break;\n      case 'success':\n        icon = alertSuccessOutline;\n        break;\n      case 'warning':\n        icon = alertWarningOutline;\n        break;\n      case 'danger':\n        icon = alertDangerOutline;\n        break;\n      default:\n        icon = alertInfoOutline;\n        break;\n      }\n    }\n\n    return (\n      <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-labelledby=\"dialogLabel\" aria-describedby=\"dialogDesc\">\n        <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n        <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n          <div class=\"dialog-content\">\n            <header class=\"dialog-header\">\n              {this.hasCloseIcon\n                ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n                : ''}\n            </header>\n            <div class=\"dialog-body\">\n              {this.color !== undefined\n                ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n                : ''}\n              <h2 class=\"dialog-title\" id=\"dialogLabel\">{this.label}</h2>\n              <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n            </div>\n            <footer class=\"dialog-footer\">\n              <slot/>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-4b484f35.js';
+import { r as registerInstance, h } from './index-6f4c3286.js';
 
 const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.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:relative;display:flex;flex-direction:column;width:100%;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}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-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-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";
 

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

@@ -1 +1 @@
-{"file":"road-dropdown.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mnDAAmnD;;MCa1nD,QAAQ;;;;;;IA8BX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBA3B0C,KAAK;mBAKnB,KAAK;oBAKJ,KAAK;;qBAUsB,QAAQ;;EASlE,MAAM;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,GAAG,iBAAiB,GAAG,0BAA0B,CAAC;IACpG,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,wCAAwC,GAAG,0BAA0B,CAAC;IAC7H,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACrF,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAGzF,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,UAAU,aAAa,EAAE,IACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,EAAE,IAC3C,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"sources":["./src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\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  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\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: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\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\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-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-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\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)\n */\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: '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  * If you want to remove background of the dropdown button\n  */\n    @Prop() isLight : boolean = false;\n  \n  /**\n  * If you want to remove background of the dropdown button\n  */\n    @Prop() isMedium : boolean = false;\n\n    /**\n  * The button position.\n  */\n   @Prop({ reflect: true }) position?: 'left' | 'right';\n\n   /**\n  * The opening direction.\n  */\n    @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\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    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';\n\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 ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-dropdown.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mnDAAmnD;;MCa1nD,QAAQ;;;;;;IA8BX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBA3B0C,KAAK;mBAKnB,KAAK;oBAKJ,KAAK;;qBAUsB,QAAQ;;EASlE,MAAM;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,GAAG,iBAAiB,GAAG,0BAA0B,CAAC;IACpG,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,wCAAwC,GAAG,0BAA0B,CAAC;IAC7H,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACrF,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAGzF,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,UAAU,aAAa,EAAE,IACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,EAAE,IAC3C,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\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  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\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: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\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\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-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-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\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)\n */\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: '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  * If you want to remove background of the dropdown button\n  */\n    @Prop() isLight : boolean = false;\n  \n  /**\n  * If you want to remove background of the dropdown button\n  */\n    @Prop() isMedium : boolean = false;\n\n    /**\n  * The button position.\n  */\n   @Prop({ reflect: true }) position?: 'left' | 'right';\n\n   /**\n  * The opening direction.\n  */\n    @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\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    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';\n\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 ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as getElement } from './index-4b484f35.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-6f4c3286.js';
 
 const durationCss = ":host{display:block}road-drawer{--background:var(--road-surface-inverse)}.duration-values{flex-wrap:nowrap;width:100%;padding:2.625rem 0 2.625rem 3rem;scroll-snap-type:x proximity;overflow:scroll}.duration-values>road-col:first-child{scroll-snap-align:center}.duration-values>road-col:not(:first-child){scroll-snap-align:start}road-card{--margin-bottom:0}road-card::part(native){padding:1rem}";
 

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

@@ -1 +1 @@
-{"file":"road-duration.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0YAA0Y;;MCOjZ,QAAQ;;;;kBAUwB,KAAK;kBAKvB,UAAU;eAKb,EAAE;eAKF,GAAG;gBAKF,EAAE;;EAGzB,WAAW,CAAC,KAAkB;IAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACrB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;MACpC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;KAC1B,CAAC,CAAC;IACH,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;;;;EAcD,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAED,MAAM;IACJ,QACE,8BAAsB,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAC,QAAQ,kBAAe,IAAI,CAAC,MAAM,IAC5E,qBACE,gBAAU,KAAK,EAAC,iBAAiB,IAC9B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,MAAM,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAClI,gBAAU,KAAK,EAAC,gBAAgB,IAC9B,iBAAW,MAAM,QAAC,KAAK,EAAE,IAAI,IAC3B,sBACG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,EAAC,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAC,CAAC,OAAG,CAAC,IAAI,GAAG,EAAE,EAAE,cAAc,CAAC,OAAO,EAAE,EAAC,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAC,CAAC,CACvK,CACH,CACH,CACZ,CACQ,CACD,CACA,EACd;GACH;;;;;;;","names":[],"sources":["./src/components/duration/duration.css?tag=road-duration&encapsulation=shadow","./src/components/duration/duration.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nroad-drawer {\n  --background: var(--road-surface-inverse);\n}\n\n.duration-values {\n  flex-wrap: nowrap;\n  width: 100%;\n  padding: 2.625rem 0 2.625rem 3rem;\n  scroll-snap-type: x proximity;\n  overflow: scroll;\n}\n\n.duration-values > road-col:first-child {\n  scroll-snap-align: center;\n}\n\n.duration-values > road-col:not(:first-child) {\n  scroll-snap-align: start;\n}\n\nroad-card {\n  --margin-bottom: 0;\n}\n\nroad-card::part(native) {\n  padding: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'road-duration',\n  styleUrl: 'duration.css',\n  shadow: true,\n})\nexport class Duration {\n\n  /**\n   * Current reference of the duration element\n   */\n   @Element() el!: HTMLRoadDurationElement;\n\n  /**\n   * Set isOpen property to true to open the duration widget\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * title of the widget\n   */\n  @Prop() header: string = 'duration';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value in minutes.\n   */\n  @Prop() min: number = 15;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value in minutes.\n   */\n  @Prop() max: number = 300;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set in minutes.\n   */\n  @Prop() step: number = 15;\n\n  @Listen('roadcardclick')\n  handleClick(event: CustomEvent) {\n    this.roadselected.emit({\n      value: event.detail.value.toString(),\n      label: event.detail.label,\n    });\n    this.close();\n  }\n\n  /**\n   * Emitt the value and label of the selected option.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  /**\n   * Open the widget\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the widget\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  render() {\n    return (\n      <road-drawer is-open={this.isOpen} position=\"bottom\" drawer-title={this.header}>\n        <road-grid>\n          <road-row class=\"duration-values\">\n            {Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item =>\n              <road-col class=\"col-3 col-md-2\">\n                <road-card button value={item}>\n                  <road-label>\n                    {Math.floor(item / 60).toLocaleString(\"en-GB\", {minimumIntegerDigits: 2, useGrouping: false})}:{(item % 60).toLocaleString(\"en-GB\", {minimumIntegerDigits: 2, useGrouping: false})}\n                  </road-label>\n                </road-card>\n              </road-col>\n            )}\n          </road-row>\n        </road-grid>\n      </road-drawer>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-duration.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0YAA0Y;;MCOjZ,QAAQ;;;;kBAUwB,KAAK;kBAKvB,UAAU;eAKb,EAAE;eAKF,GAAG;gBAKF,EAAE;;EAGzB,WAAW,CAAC,KAAkB;IAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACrB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;MACpC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;KAC1B,CAAC,CAAC;IACH,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;;;;EAcD,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAED,MAAM;IACJ,QACE,8BAAsB,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAC,QAAQ,kBAAe,IAAI,CAAC,MAAM,IAC5E,qBACE,gBAAU,KAAK,EAAC,iBAAiB,IAC9B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,MAAM,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAClI,gBAAU,KAAK,EAAC,gBAAgB,IAC9B,iBAAW,MAAM,QAAC,KAAK,EAAE,IAAI,IAC3B,sBACG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,EAAC,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAC,CAAC,OAAG,CAAC,IAAI,GAAG,EAAE,EAAE,cAAc,CAAC,OAAO,EAAE,EAAC,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAC,CAAC,CACvK,CACH,CACH,CACZ,CACQ,CACD,CACA,EACd;GACH;;;;;;;","names":[],"sources":["src/components/duration/duration.css?tag=road-duration&encapsulation=shadow","src/components/duration/duration.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nroad-drawer {\n  --background: var(--road-surface-inverse);\n}\n\n.duration-values {\n  flex-wrap: nowrap;\n  width: 100%;\n  padding: 2.625rem 0 2.625rem 3rem;\n  scroll-snap-type: x proximity;\n  overflow: scroll;\n}\n\n.duration-values > road-col:first-child {\n  scroll-snap-align: center;\n}\n\n.duration-values > road-col:not(:first-child) {\n  scroll-snap-align: start;\n}\n\nroad-card {\n  --margin-bottom: 0;\n}\n\nroad-card::part(native) {\n  padding: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'road-duration',\n  styleUrl: 'duration.css',\n  shadow: true,\n})\nexport class Duration {\n\n  /**\n   * Current reference of the duration element\n   */\n   @Element() el!: HTMLRoadDurationElement;\n\n  /**\n   * Set isOpen property to true to open the duration widget\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * title of the widget\n   */\n  @Prop() header: string = 'duration';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value in minutes.\n   */\n  @Prop() min: number = 15;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value in minutes.\n   */\n  @Prop() max: number = 300;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set in minutes.\n   */\n  @Prop() step: number = 15;\n\n  @Listen('roadcardclick')\n  handleClick(event: CustomEvent) {\n    this.roadselected.emit({\n      value: event.detail.value.toString(),\n      label: event.detail.label,\n    });\n    this.close();\n  }\n\n  /**\n   * Emitt the value and label of the selected option.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  /**\n   * Open the widget\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the widget\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  render() {\n    return (\n      <road-drawer is-open={this.isOpen} position=\"bottom\" drawer-title={this.header}>\n        <road-grid>\n          <road-row class=\"duration-values\">\n            {Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item =>\n              <road-col class=\"col-3 col-md-2\">\n                <road-card button value={item}>\n                  <road-label>\n                    {Math.floor(item / 60).toLocaleString(\"en-GB\", {minimumIntegerDigits: 2, useGrouping: false})}:{(item % 60).toLocaleString(\"en-GB\", {minimumIntegerDigits: 2, useGrouping: false})}\n                  </road-label>\n                </road-card>\n              </road-col>\n            )}\n          </road-row>\n        </road-grid>\n      </road-drawer>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/road-flap.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-6f4c3286.js';
 
 const flapCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:1.5rem;padding:0 0.75rem;font-size:var(--road-font-size-14);font-weight:700;background:var(--road-grey-000);border:1px solid transparent;border-radius:1.5rem}:host(.flap-promo){color:var(--road-tag-offer);border-color:var(--road-tag-offer)}:host(.flap-exclu){color:var(--road-tag-exclusivity);border-color:var(--road-tag-exclusivity)}:host(.flap-info){color:var(--road-tag-default);border-color:var(--road-tag-default)}:host(.flap-ecology){color:var(--road-tag-ecology);border-color:var(--road-tag-ecology)}:host(.flap-blackfriday){color:var(--road-tag-black-friday);border-color:var(--road-tag-black-friday)}:host(.flap-promo-filled){color:var(--road-on-primary);background-color:var(--road-tag-offer)}:host(.flap-exclu-filled){color:var(--road-on-primary);background-color:var(--road-tag-exclusivity)}:host(.flap-info-filled){color:var(--road-on-primary);background-color:var(--road-tag-default)}:host(.flap-ecology-filled){color:var(--road-on-primary);background-color:var(--road-tag-ecology)}:host(.flap-blackfriday-filled){color:var(--road-on-primary);background-color:var(--road-tag-black-friday)}:host(.flap-md){height:2rem;padding:0 1rem;font-size:var(--road-font-size-16)}";
 

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

@@ -1 +1 @@
-{"file":"road-flap.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,gwCAAgwC;;MCWnwC,IAAI;;;iBAKyD,OAAO;kBAKnD,KAAK;gBAKY,IAAI;;EAEjD,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,QAAQ,IAAI,CAAC,KAAK,SAAS,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;IAEpF,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,UAAU,SAAS,IAAI,CAAC,IAAI,EAAE,IAC5C,eAAO,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flap/flap.css?tag=road-flap&encapsulation=shadow","./src/components/flap/flap.tsx"],"sourcesContent":["/*\n * Flap\n *\n * Index\n * - Flap\n * - Colors\n * - Sizes\n */\n\n/* FLAP\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-14);\n  font-weight: 700;\n  background: var(--road-grey-000);\n  border: 1px solid transparent;\n  border-radius: 1.5rem;\n}\n\n/* COLORS\n -------------------- */\n\n:host(.flap-promo) {\n  color: var(--road-tag-offer);\n  border-color: var(--road-tag-offer);\n}\n\n:host(.flap-exclu) {\n  color: var(--road-tag-exclusivity);\n  border-color: var(--road-tag-exclusivity);\n}\n\n:host(.flap-info) {\n  color: var(--road-tag-default);\n  border-color: var(--road-tag-default);\n}\n\n:host(.flap-ecology) {\n  color: var(--road-tag-ecology);\n  border-color: var(--road-tag-ecology);\n}\n\n:host(.flap-blackfriday) {\n  color: var(--road-tag-black-friday);\n  border-color: var(--road-tag-black-friday);\n}\n\n:host(.flap-promo-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-offer);\n}\n\n:host(.flap-exclu-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-exclusivity);\n}\n\n:host(.flap-info-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-default);\n}\n\n:host(.flap-ecology-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-ecology);\n}\n\n:host(.flap-blackfriday-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-black-friday);\n}\n\n/* SIZES\n -------------------- */\n\n:host(.flap-md) {\n  height: 2rem;\n  padding: 0 1rem;\n  font-size: var(--road-font-size-16);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the flap.\n */\n\n@Component({\n  tag: 'road-flap',\n  styleUrl: 'flap.css',\n  shadow: true,\n})\nexport class Flap {\n\n  /**\n   * Set the color of the flap.\n   */\n  @Prop() color: 'promo' | 'exclu' | 'info' | 'ecology' | 'blackfriday' = 'promo';\n\n  /**\n   * Set to `true` for a filled flap\n   */\n    @Prop() filled: boolean = false;\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size: 'sm' | 'md' = 'sm';\n\n  render() {\n    const colorClass = this.filled ? `flap-${this.color}-filled` : `flap-${this.color}`;\n\n    return (\n      <Host class={`${colorClass} flap-${this.size}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-flap.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,gwCAAgwC;;MCWnwC,IAAI;;;iBAKyD,OAAO;kBAKnD,KAAK;gBAKY,IAAI;;EAEjD,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,QAAQ,IAAI,CAAC,KAAK,SAAS,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;IAEpF,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,UAAU,SAAS,IAAI,CAAC,IAAI,EAAE,IAC5C,eAAO,CACF,EACP;GACH;;;;;;","names":[],"sources":["src/components/flap/flap.css?tag=road-flap&encapsulation=shadow","src/components/flap/flap.tsx"],"sourcesContent":["/*\n * Flap\n *\n * Index\n * - Flap\n * - Colors\n * - Sizes\n */\n\n/* FLAP\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-14);\n  font-weight: 700;\n  background: var(--road-grey-000);\n  border: 1px solid transparent;\n  border-radius: 1.5rem;\n}\n\n/* COLORS\n -------------------- */\n\n:host(.flap-promo) {\n  color: var(--road-tag-offer);\n  border-color: var(--road-tag-offer);\n}\n\n:host(.flap-exclu) {\n  color: var(--road-tag-exclusivity);\n  border-color: var(--road-tag-exclusivity);\n}\n\n:host(.flap-info) {\n  color: var(--road-tag-default);\n  border-color: var(--road-tag-default);\n}\n\n:host(.flap-ecology) {\n  color: var(--road-tag-ecology);\n  border-color: var(--road-tag-ecology);\n}\n\n:host(.flap-blackfriday) {\n  color: var(--road-tag-black-friday);\n  border-color: var(--road-tag-black-friday);\n}\n\n:host(.flap-promo-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-offer);\n}\n\n:host(.flap-exclu-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-exclusivity);\n}\n\n:host(.flap-info-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-default);\n}\n\n:host(.flap-ecology-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-ecology);\n}\n\n:host(.flap-blackfriday-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-black-friday);\n}\n\n/* SIZES\n -------------------- */\n\n:host(.flap-md) {\n  height: 2rem;\n  padding: 0 1rem;\n  font-size: var(--road-font-size-16);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the flap.\n */\n\n@Component({\n  tag: 'road-flap',\n  styleUrl: 'flap.css',\n  shadow: true,\n})\nexport class Flap {\n\n  /**\n   * Set the color of the flap.\n   */\n  @Prop() color: 'promo' | 'exclu' | 'info' | 'ecology' | 'blackfriday' = 'promo';\n\n  /**\n   * Set to `true` for a filled flap\n   */\n    @Prop() filled: boolean = false;\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size: 'sm' | 'md' = 'sm';\n\n  render() {\n    const colorClass = this.filled ? `flap-${this.color}-filled` : `flap-${this.color}`;\n\n    return (\n      <Host class={`${colorClass} flap-${this.size}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/road-global-navigation.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, e as createEvent, h, H as Host } from './index-4b484f35.js';
-import './polyfill-ab80527b.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6f4c3286.js';
+import './polyfill-dc7c89b2.js';
 
 const globalNavigationCss = ":host{position:fixed;top:0;z-index:2;width:100%}";
 

package/dist/esm/road-global-navigation.entry.js.map

@@ -1 +1 @@
-{"file":"road-global-navigation.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,kDAAkD;;MCYjE,gBAAgB;;;;;;;EAO3B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,IAEd,eAAO,CACF,EACP;GACH;;;;;;;;;","names":[],"sources":["./src/components/global-navigation/global-navigation.css?tag=road-global-navigation&encapsulation=shadow","./src/components/global-navigation/global-navigation.tsx"],"sourcesContent":["/*\n * Global Navigation\n *\n */\n\n:host {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  width: 100%;\n}\n\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer\n */\n\n@Component({\n  tag: 'road-global-navigation',\n  styleUrl: 'global-navigation.css',\n  shadow: true,\n})\nexport class GlobalNavigation {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-global-navigation.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,kDAAkD;;MCYjE,gBAAgB;;;;;;;EAO3B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,IAEd,eAAO,CACF,EACP;GACH;;;;;;;;;","names":[],"sources":["src/components/global-navigation/global-navigation.css?tag=road-global-navigation&encapsulation=shadow","src/components/global-navigation/global-navigation.tsx"],"sourcesContent":["/*\n * Global Navigation\n *\n */\n\n:host {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  width: 100%;\n}\n\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer\n */\n\n@Component({\n  tag: 'road-global-navigation',\n  styleUrl: 'global-navigation.css',\n  shadow: true,\n})\nexport class GlobalNavigation {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, f as getElement } from './index-4b484f35.js';
-import { i as isStr, g as getUrl, b as getName } from './utils-ff713b72.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-6f4c3286.js';
+import { i as isStr, g as getUrl, b as getName } from './utils-c701b3c5.js';
 
 const validateContent = (svgContent) => {
   const div = document.createElement('div');

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

@@ -1 +1 @@
-{"file":"road-illustration.entry.js","mappings":"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","names":[],"sources":["./src/components/illustration/validate.ts","./src/components/illustration/request.ts","./src/components/illustration/illustration.css?tag=road-illustration&encapsulation=shadow","./src/components/illustration/illustration.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadillustrationContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getIllustrationSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadillustrationContent.set(url, svgContent || '');\n          });\n        }\n        roadillustrationContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadillustrationContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Illustration\n *\n * Index\n * - Sizes\n * - Colors\n * - Rotation\n */\n\n:host {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--road-icon);\n  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  fill: currentColor;\n  contain: strict;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.illustration-sm) {\n  width: 4rem;\n  height: 4rem;\n}\n\n:host(.illustration-md) {\n  width: 8rem;\n  height: 8rem;\n}\n\n:host(.illustration-lg) {\n  width: 16rem;\n  height: 16rem;\n}\n\n:host(.illustration-2x) {\n  width: 32rem;\n  height: 32rem;\n}\n\n/* ROTATION\n -------------------- */\n\n:host(.illustration-rotate-90) {\n  transform: rotate(90deg);\n}\n\n:host(.illustration-rotate-180) {\n  transform: rotate(180deg);\n}\n\n:host(.illustration-rotate-270) {\n  transform: rotate(270deg);\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-illustration.entry.js","mappings":"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","names":[],"sources":["src/components/illustration/validate.ts","src/components/illustration/request.ts","src/components/illustration/illustration.css?tag=road-illustration&encapsulation=shadow","src/components/illustration/illustration.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadillustrationContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getIllustrationSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadillustrationContent.set(url, svgContent || '');\n          });\n        }\n        roadillustrationContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadillustrationContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Illustration\n *\n * Index\n * - Sizes\n * - Colors\n * - Rotation\n */\n\n:host {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--road-icon);\n  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  fill: currentColor;\n  contain: strict;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.illustration-sm) {\n  width: 4rem;\n  height: 4rem;\n}\n\n:host(.illustration-md) {\n  width: 8rem;\n  height: 8rem;\n}\n\n:host(.illustration-lg) {\n  width: 16rem;\n  height: 16rem;\n}\n\n:host(.illustration-2x) {\n  width: 32rem;\n  height: 32rem;\n}\n\n/* ROTATION\n -------------------- */\n\n:host(.illustration-rotate-90) {\n  transform: rotate(90deg);\n}\n\n:host(.illustration-rotate-180) {\n  transform: rotate(180deg);\n}\n\n:host(.illustration-rotate-270) {\n  transform: rotate(270deg);\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/road-img.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, d as getElement } from './index-6f4c3286.js';
 
 const imgCss = ":host{display:block;object-fit:contain}.native-img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit;visibility:visible;opacity:1;transition:opacity 0.3s ease-in-out}:host(.placeholder){background:var(--road-grey-80)}:host(.placeholder) img{visibility:hidden;opacity:0}";
 

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

@@ -1 +1 @@
-{"file":"road-img.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,6SAA6S;;MCU/S,GAAG;;;;;;;;;IAqFN,WAAM,GAAG;MACf,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;;;;;;EAvEF,UAAU;IACR,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAuBD,gBAAgB;IACd,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAEO,KAAK;IACX,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,OAAO;KACR;IACD,IACE,OAAQ,MAAc,KAAK,WAAW;MACtC,sBAAsB,IAAI,MAAM;MAChC,2BAA2B,IAAI,MAAM;MACrC,gBAAgB,IAAI,MAAM,CAAC,yBAAyB,CAAC,SAAS,EAAE;MAChE,IAAI,CAAC,QAAQ,EAAE,CAAC;MAChB,IAAI,CAAC,EAAE,GAAG,IAAI,oBAAoB,CAAC,IAAI;;;;QAIrC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;UAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;UACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;SAAM;;MAEL,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC;KACpC;GACF;EAEO,IAAI;IACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;IACxB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;GAC7B;EAYO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;GACF;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,EAAE,GAAG,aAAa,CAAC;IAEpE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,IACtB,WACE,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,OAAO,GACZ,CACG,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/img/img.css?tag=road-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["/*\n * Image\n *\n * Index\n * - Img\n * - Native\n * - Placeholder\n */\n\n\n:host {\n  display: block;\n  object-fit: contain;\n}\n\n/* NATIVE\n -------------------- */\n\n.native-img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n  object-position: inherit;\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.3s ease-in-out;\n}\n\n/* PLACEHOLDER\n -------------------- */\n\n:host(.placeholder) {\n  background: var(--road-grey-80);\n}\n\n:host(.placeholder) img {\n  visibility: hidden;\n  opacity: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n/**\n * @part image - The inner `img` element.\n */\n@Component({\n  tag: 'road-img',\n  styleUrl: 'img.css',\n  shadow: true,\n})\nexport class Img {\n\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadImgElement;\n\n  @State() loadSrc?: string;\n\n  @State() loadError?: () => void;\n\n  /**\n   * This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong,\n   * the image is not in one of the supported formats, or if the image is not yet downloaded.\n   */\n  @Prop() alt?: string;\n\n  /**\n   * The image URL. This attribute is mandatory for the `<img>` element.\n   */\n  @Prop() src?: string;\n  @Watch('src')\n  srcChanged() {\n    this.addIO();\n  }\n\n  /**\n   * Emitted when the img src has been set\n   */\n  @Event() roadimgwillload!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadImgWillLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the image has finished loading\n   */\n  @Event() roadimgdidload!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadImgDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the img fails to load\n   */\n  @Event() roaderror!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadError!: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  private addIO() {\n    if (this.src === undefined) {\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window &&\n      'IntersectionObserverEntry' in window &&\n      'isIntersecting' in window.IntersectionObserverEntry.prototype) {\n      this.removeIO();\n      this.io = new IntersectionObserver(data => {\n        // because there will only ever be one instance\n        // of the element we are observing\n        // we can just use data[0]\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.el);\n    } else {\n      // fall back to setTimeout for Safari and IE\n      setTimeout(() => this.load(), 200);\n    }\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this.src;\n    this.roadimgwillload.emit();\n    this.roadImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.roadimgdidload.emit();\n    this.roadImgDidLoad.emit();\n  };\n\n  private onError = () => {\n    this.roaderror.emit();\n    this.roadError.emit();\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  render() {\n    const placeholder = this.loadSrc !== undefined ? '' : 'placeholder';\n\n    return (\n      <Host class={placeholder}>\n        <img\n          class=\"native-img\"\n          decoding=\"async\"\n          src={this.loadSrc}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n          part=\"image\"\n        />\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-img.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,6SAA6S;;MCU/S,GAAG;;;;;;;;;IAqFN,WAAM,GAAG;MACf,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;;;;;;EAvEF,UAAU;IACR,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAuBD,gBAAgB;IACd,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAEO,KAAK;IACX,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,OAAO;KACR;IACD,IACE,OAAQ,MAAc,KAAK,WAAW;MACtC,sBAAsB,IAAI,MAAM;MAChC,2BAA2B,IAAI,MAAM;MACrC,gBAAgB,IAAI,MAAM,CAAC,yBAAyB,CAAC,SAAS,EAAE;MAChE,IAAI,CAAC,QAAQ,EAAE,CAAC;MAChB,IAAI,CAAC,EAAE,GAAG,IAAI,oBAAoB,CAAC,IAAI;;;;QAIrC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;UAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;UACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;SAAM;;MAEL,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC;KACpC;GACF;EAEO,IAAI;IACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;IACxB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;GAC7B;EAYO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;GACF;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,EAAE,GAAG,aAAa,CAAC;IAEpE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,IACtB,WACE,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,OAAO,GACZ,CACG,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/img/img.css?tag=road-img&encapsulation=shadow","src/components/img/img.tsx"],"sourcesContent":["/*\n * Image\n *\n * Index\n * - Img\n * - Native\n * - Placeholder\n */\n\n\n:host {\n  display: block;\n  object-fit: contain;\n}\n\n/* NATIVE\n -------------------- */\n\n.native-img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n  object-position: inherit;\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.3s ease-in-out;\n}\n\n/* PLACEHOLDER\n -------------------- */\n\n:host(.placeholder) {\n  background: var(--road-grey-80);\n}\n\n:host(.placeholder) img {\n  visibility: hidden;\n  opacity: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n/**\n * @part image - The inner `img` element.\n */\n@Component({\n  tag: 'road-img',\n  styleUrl: 'img.css',\n  shadow: true,\n})\nexport class Img {\n\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadImgElement;\n\n  @State() loadSrc?: string;\n\n  @State() loadError?: () => void;\n\n  /**\n   * This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong,\n   * the image is not in one of the supported formats, or if the image is not yet downloaded.\n   */\n  @Prop() alt?: string;\n\n  /**\n   * The image URL. This attribute is mandatory for the `<img>` element.\n   */\n  @Prop() src?: string;\n  @Watch('src')\n  srcChanged() {\n    this.addIO();\n  }\n\n  /**\n   * Emitted when the img src has been set\n   */\n  @Event() roadimgwillload!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadImgWillLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the image has finished loading\n   */\n  @Event() roadimgdidload!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadImgDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the img fails to load\n   */\n  @Event() roaderror!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadError!: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  private addIO() {\n    if (this.src === undefined) {\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window &&\n      'IntersectionObserverEntry' in window &&\n      'isIntersecting' in window.IntersectionObserverEntry.prototype) {\n      this.removeIO();\n      this.io = new IntersectionObserver(data => {\n        // because there will only ever be one instance\n        // of the element we are observing\n        // we can just use data[0]\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.el);\n    } else {\n      // fall back to setTimeout for Safari and IE\n      setTimeout(() => this.load(), 200);\n    }\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this.src;\n    this.roadimgwillload.emit();\n    this.roadImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.roadimgdidload.emit();\n    this.roadImgDidLoad.emit();\n  };\n\n  private onError = () => {\n    this.roaderror.emit();\n    this.roadError.emit();\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  render() {\n    const placeholder = this.loadSrc !== undefined ? '' : 'placeholder';\n\n    return (\n      <Host class={placeholder}>\n        <img\n          class=\"native-img\"\n          decoding=\"async\"\n          src={this.loadSrc}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n          part=\"image\"\n        />\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/road-modal.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 { a as navigationClose } from './index-8f45025b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-6f4c3286.js';
+import { a as navigationClose } from './index-891decf5.js';
 
 const modalCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:5rem;padding-left:5rem}}";
 

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

@@ -1 +1 @@
-{"file":"road-modal.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,qoEAAqoE;;MCYzoE,KAAK;;;;;;;IA2DR,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;oBAtDyB,GAAG;kBAKa,KAAK;4BAKZ,KAAK;;wBAUT,IAAI;;;;;EAWpC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE;MACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;GACnB;;;;EAgBD,QAAQ,CAAC,KAAoB;IAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;MACjD,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;GACF;;;;EAKD,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI;MAC7D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;IACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,CAAC;IAC/E,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,OAAO,IAAC,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAAS,GAAG,EAAE,CAAC;IAEjN,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,EAAE,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACnE,WAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO,EACtE,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/F,WAAK,KAAK,EAAC,eAAe,IACxB,cAAQ,KAAK,EAAE,gBAAgB,kBAAkB,EAAE,IACjD,UAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC7C,gBAAgB,CACV,EACT,WAAK,KAAK,EAAC,YAAY,IACrB,eAAO,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/modal/modal.css?tag=road-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["/*\n * Modal\n *\n * Index\n * - Overlay\n * - Modal\n * - Content\n * - Header\n * - Actions\n * - Title\n * - Body\n */\n\n/**\n * @prop --z-index: The z-index of the Modal.\n */\n\n\n/* OVERLAY\n -------------------- */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-grey-900);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  cursor: pointer;\n  background: var(--road-overlay);\n}\n\n/* MODAL\n -------------------- */\n\n.modal-dialog {\n  position: relative;\n  width: 100%;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.modal-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.modal-open) .modal-dialog {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100vh;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  box-shadow: var(--road-elevation-hight);\n}\n\n@media (min-width: 768px) {\n\n  .modal-content {\n    height: auto;\n    border-radius: 0.25rem;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  color: var(--road-on-header-surface);\n  background: var(--road-header-surface);\n}\n\n.modal-header road-icon {\n  color: var(--road-header-icon);\n}\n\n@media (min-width: 768px) {\n\n  .modal-header {\n    border-radius: 0.25rem 0.25rem 0 0;\n  }\n}\n\n/**\n * Modal header inverse colors\n */\n\n.modal-header-inverse {\n  color: var(--road-on-surface);\n  background: none;\n}\n\n.modal-header-inverse road-icon {\n  color: var(--road-icon);\n}\n\n/* ACTIONS\n -------------------- */\n\n.modal-action,\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  font-weight: 700;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.modal-action ~ .modal-title,\n.modal-close ~ .modal-title {\n  padding-left: 0;\n}\n\n.modal-action-left,\n.modal-close-left {\n  margin-right: auto;\n}\n\n/* TITLE\n -------------------- */\n\n.modal-title {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  height: 3.5rem;\n  padding-left: 3.5rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  font-weight: 400;\n}\n\n/* BODY\n -------------------- */\n\n.modal-body {\n  padding: 2.5rem 0.5rem;\n  overflow-y: auto;\n}\n\n.modal-header-inverse + .modal-body {\n  padding-top: 0;\n}\n\n@media (min-width: 768px) {\n\n  .modal-body {\n    max-height: 86vh;\n    padding-right: 5rem;\n    padding-left: 5rem;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n/**\n * @slot  - Content of the modal.\n */\n\n@Component({\n  tag: 'road-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class Modal {\n\n  /**\n   * Current reference of the modal\n   */\n  @Element() el!: HTMLRoadModalElement;\n\n  /**\n   * Max width of the modal on desktop\n   */\n  @Prop() maxWidth: number = 696;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Title of the modal in the header bar\n   */\n  @Prop() modalTitle?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when closing the modal\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the modal\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the modal\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'modal-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"modal-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n\n    return (\n      <Host class={`modal ${modalIsOpenClass}`} tabindex=\"-1\" role=\"dialog\">\n        <div class=\"modal-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"modal-dialog\" style={{ maxWidth: `${this.maxWidth}px` }} role=\"document\" tabindex=\"0\">\n          <div class=\"modal-content\">\n            <header class={`modal-header ${inverseHeaderClass}`}>\n              <h2 class=\"modal-title\">{this.modalTitle}</h2>\n              {closeIconElement}\n            </header>\n            <div class=\"modal-body\">\n              <slot/>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-modal.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,qoEAAqoE;;MCYzoE,KAAK;;;;;;;IA2DR,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;oBAtDyB,GAAG;kBAKa,KAAK;4BAKZ,KAAK;;wBAUT,IAAI;;;;;EAWpC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE;MACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;GACnB;;;;EAgBD,QAAQ,CAAC,KAAoB;IAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;MACjD,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;GACF;;;;EAKD,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI;MAC7D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;IACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,CAAC;IAC/E,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,OAAO,IAAC,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAAS,GAAG,EAAE,CAAC;IAEjN,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,EAAE,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACnE,WAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO,EACtE,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/F,WAAK,KAAK,EAAC,eAAe,IACxB,cAAQ,KAAK,EAAE,gBAAgB,kBAAkB,EAAE,IACjD,UAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC7C,gBAAgB,CACV,EACT,WAAK,KAAK,EAAC,YAAY,IACrB,eAAO,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/modal/modal.css?tag=road-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * Modal\n *\n * Index\n * - Overlay\n * - Modal\n * - Content\n * - Header\n * - Actions\n * - Title\n * - Body\n */\n\n/**\n * @prop --z-index: The z-index of the Modal.\n */\n\n\n/* OVERLAY\n -------------------- */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-grey-900);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  cursor: pointer;\n  background: var(--road-overlay);\n}\n\n/* MODAL\n -------------------- */\n\n.modal-dialog {\n  position: relative;\n  width: 100%;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.modal-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.modal-open) .modal-dialog {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100vh;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  box-shadow: var(--road-elevation-hight);\n}\n\n@media (min-width: 768px) {\n\n  .modal-content {\n    height: auto;\n    border-radius: 0.25rem;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  color: var(--road-on-header-surface);\n  background: var(--road-header-surface);\n}\n\n.modal-header road-icon {\n  color: var(--road-header-icon);\n}\n\n@media (min-width: 768px) {\n\n  .modal-header {\n    border-radius: 0.25rem 0.25rem 0 0;\n  }\n}\n\n/**\n * Modal header inverse colors\n */\n\n.modal-header-inverse {\n  color: var(--road-on-surface);\n  background: none;\n}\n\n.modal-header-inverse road-icon {\n  color: var(--road-icon);\n}\n\n/* ACTIONS\n -------------------- */\n\n.modal-action,\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  font-weight: 700;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.modal-action ~ .modal-title,\n.modal-close ~ .modal-title {\n  padding-left: 0;\n}\n\n.modal-action-left,\n.modal-close-left {\n  margin-right: auto;\n}\n\n/* TITLE\n -------------------- */\n\n.modal-title {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  height: 3.5rem;\n  padding-left: 3.5rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  font-weight: 400;\n}\n\n/* BODY\n -------------------- */\n\n.modal-body {\n  padding: 2.5rem 0.5rem;\n  overflow-y: auto;\n}\n\n.modal-header-inverse + .modal-body {\n  padding-top: 0;\n}\n\n@media (min-width: 768px) {\n\n  .modal-body {\n    max-height: 86vh;\n    padding-right: 5rem;\n    padding-left: 5rem;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n/**\n * @slot  - Content of the modal.\n */\n\n@Component({\n  tag: 'road-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class Modal {\n\n  /**\n   * Current reference of the modal\n   */\n  @Element() el!: HTMLRoadModalElement;\n\n  /**\n   * Max width of the modal on desktop\n   */\n  @Prop() maxWidth: number = 696;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Title of the modal in the header bar\n   */\n  @Prop() modalTitle?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when closing the modal\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the modal\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the modal\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'modal-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"modal-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n\n    return (\n      <Host class={`modal ${modalIsOpenClass}`} tabindex=\"-1\" role=\"dialog\">\n        <div class=\"modal-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"modal-dialog\" style={{ maxWidth: `${this.maxWidth}px` }} role=\"document\" tabindex=\"0\">\n          <div class=\"modal-content\">\n            <header class={`modal-header ${inverseHeaderClass}`}>\n              <h2 class=\"modal-title\">{this.modalTitle}</h2>\n              {closeIconElement}\n            </header>\n            <div class=\"modal-body\">\n              <slot/>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/road-navbar-item.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, d as getElement } from './index-6f4c3286.js';
 
 const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon{color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:\"\";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
 

package/dist/esm/road-navbar-item.entry.js.map

@@ -1 +1 @@
-{"file":"road-navbar-item.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,s6EAAs6E;;MCa/6E,UAAU;;;;;IAiFb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAClD,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACE,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;OACzB,IAED,yBAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7D,YAAM,KAAK,EAAC,cAAc,IACxB,eAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","./src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-navbar-item.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,s6EAAs6E;;MCa/6E,UAAU;;;;;IAiFb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAClD,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACE,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;OACzB,IAED,yBAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7D,YAAM,KAAK,EAAC,cAAc,IACxB,eAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;","names":[],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}