@roadtrip/components 3.45.2 → 3.46.0

package/dist/roadtrip/p-45cabcdf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","RoadCheckboxStyle0","Checkbox","constructor","hostRef","this","checkboxId","checkboxIds","name","required","checked","indeterminate","disabled","value","label","inverse","onClick","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","checkedChanged","isChecked","roadchange","roadChange","render","labelId","inverseClass","isInvalidClass","error","undefined","h","Host","key","class","type","id","htmlFor","secondaryLabel","icon","checkWide","navigationAddLess","helper"],"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-label-span {\n  color: var(--road-on-surface-weak);\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  margin-left: 2rem;\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface-weak);\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   * Secondary Label for the field\n   */\n    @Prop() secondaryLabel?: string;\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} <span class=\"form-check-label-span\">{this.secondaryLabel}</span><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"],"mappings":"4HAAA,MAAMA,EAAc,+/HACpB,MAAAC,EAAeD,E,MCaFE,EAAQ,MALrB,WAAAC,CAAAC,G,wOAUUC,KAAAC,WAAqB,iBAAiBC,MAKtCF,KAAAG,KAAeH,KAAKC,WAKpBD,KAAAI,SAAoB,MAKHJ,KAAAK,QAAU,MAK1BL,KAAAM,cAAyB,MAK1BN,KAAAO,SAAoB,MAKpBP,KAAAQ,MAAgB,KAKhBR,KAAAS,MAAgB,GAAGT,KAAKC,mBAUxBD,KAAAU,QAAmB,MAmDnBV,KAAAW,QAAU,KAChBX,KAAKK,SAAWL,KAAKK,QACrBL,KAAKM,cAAgB,KAAK,EAGpBN,KAAAY,QAAU,KAChBZ,KAAKa,UAAUC,OACfd,KAAKe,UAAUD,MAAM,EAGfd,KAAAgB,OAAS,KACfhB,KAAKiB,SAASH,OACdd,KAAKkB,SAASJ,MAAM,C,CAvBtB,cAAAK,CAAeC,GACbpB,KAAKqB,WAAWP,KAAK,CACnBT,QAASe,EACTZ,MAAOR,KAAKQ,QAEdR,KAAKsB,WAAWR,KAAK,CACnBT,QAASe,EACTZ,MAAOR,KAAKQ,O,CAmBhB,MAAAe,GACE,MAAMC,EAAUxB,KAAKC,WAAa,SAClC,MAAMwB,EAAezB,KAAKU,SAAW,wBACrC,MAAMgB,EAAiB1B,KAAK2B,QAAUC,YAAc5B,KAAKK,SAAWL,KAAK2B,QAAU,GAAK,aAAe,GAEvG,OACEE,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CACEC,MAAO,oBAAoBN,IAC3BO,KAAK,WACLC,GAAIlC,KAAKC,WACTE,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfG,SAAUP,KAAKO,SACfD,cAAeN,KAAKM,cACpBD,QAASL,KAAKK,QACdG,MAAOR,KAAKQ,MAAK,eACH,GAAGR,KAAKK,UAAS,gBAChBL,KAAKO,SAAW,OAAS,KAAI,kBAC3BiB,EACjBb,QAASX,KAAKW,QACdC,QAASZ,KAAKY,QACdI,OAAQhB,KAAKgB,SAEfa,EAAA,SAAAE,IAAA,2CAAOC,MAAO,oBAAoBP,IAAgBS,GAAIV,EAASW,QAASnC,KAAKC,YAC3E4B,EAAA,OAAAE,IAAA,4CACG/B,KAAKS,MAAK,IAAEoB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yBAAyBhC,KAAKoC,gBAAsBP,EAAA,QAAAE,IAAA,8CAE9E/B,KAAKK,UAAYL,KAAKM,eAAiBuB,EAAA,aAAAE,IAAA,2CAAWC,MAAM,kBAAkBK,KAAMC,IAChFtC,KAAKM,eAAiBuB,EAAA,aAAAE,IAAA,2CAAWC,MAAM,kBAAkBK,KAAME,KAEjEvC,KAAK2B,OAAS3B,KAAK2B,QAAU,IAAME,EAAA,KAAAE,IAAA,2CAAGC,MAAM,oBAAoBhC,KAAK2B,OACrE3B,KAAKwC,QAAUxC,KAAKwC,SAAW,IAAMX,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUhC,KAAKwC,Q,4DAMtE,IAAItC,EAAc,E","ignoreList":[]}