{"version":3,"file":"CsoCheckbox.js","sources":["../../../src/components/core/form/CsoCheckbox.vue"],"sourcesContent":["<template>\r\n  <div :class=\"[{'has-error': validationErrors}, `cso-checkbox cso-checkbox--${modifier}` ]\">\r\n    <input type=\"checkbox\"\r\n           :id=\"name\"\r\n           :name=\"name\"\r\n           :validation-name=\"validationName\"\r\n           :disabled=\"disabled\"\r\n           v-model=\"currentValue\"\r\n           @change=\"onInput\"\r\n           @checked=\"onInput\"\r\n           @click=\"onInput\"\r\n           @input=\"onInput\"\r\n           @blur=\"onBlur\" />\r\n    <label :for=\"name\" :class=\"{'blueLink': blueLink}\">\r\n      <span v-html=\"label\" />\r\n      <cso-info-icon v-if=\"hint\"\r\n                     :content=\"hint\" />\r\n    </label>\r\n\r\n    <div class=\"cso-checkbox--errors\"\r\n         v-if=\"validationErrors\">\r\n      <span v-for=\"(error, index) in validationErrors\"\r\n            :key=\"index\">\r\n        {{ error.message }}\r\n      </span>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport validatedInputField from '@/mixins/validatedInputField'\r\n\r\nimport CsoInfoIcon from '@/components/core/composition/CsoInfoIcon.vue'\r\n\r\nexport default {\r\n  name: 'CsoCheckbox',\r\n  mixins: [validatedInputField],\r\n  props: {\r\n    modifier: {\r\n      type: String,\r\n      default: 'primary'\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: false\r\n    },\r\n    blueLink: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: false\r\n    }\r\n  },\r\n  components: {\r\n    CsoInfoIcon\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.cso-checkbox {\r\n  /* Base for label styling */\r\n  [type='checkbox'] {\r\n    position: absolute;\r\n    left: -9999px;\r\n\r\n    & + label {\r\n      position: relative;\r\n      padding-left: 27px;\r\n      cursor: pointer;\r\n      margin-top: 0;\r\n      margin-bottom: 0.65em;\r\n      word-break: break-word;\r\n      font-size: 16px;\r\n      line-height: 24px;\r\n      font-family: $font-family-regular;\r\n      color: $black;\r\n\r\n      h4 {\r\n        font-size: 20px;\r\n      }\r\n\r\n      p {\r\n        font-size: 16px;\r\n        line-height: 24px;\r\n      }\r\n\r\n      a {\r\n        text-decoration: none;\r\n\r\n        &:hover {\r\n          text-decoration: underline;\r\n        }\r\n      }\r\n    }\r\n\r\n    /* checkbox aspect */\r\n    & + label:before {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      top: 2px;\r\n      width: 18px;\r\n      height: 18px;\r\n      border: 1px solid $gray;\r\n      background: #fff;\r\n      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\r\n      font-family: $font-family-regular;\r\n      font-size: 14px;\r\n    }\r\n\r\n    /* checked mark aspect */\r\n    & + label:after {\r\n      content: '\\2713';\r\n      font-weight: bold;\r\n      position: absolute;\r\n      left: 0;\r\n      top: 2px;\r\n      padding-left: 3px;\r\n      padding-top: 2px;\r\n      width: 18px;\r\n      height: 18px;\r\n      font-size: 16px;\r\n      line-height: 0.8;\r\n      color: $black;\r\n      transition: all 0.2s;\r\n      font-family: $font-family-regular;\r\n      border: 1px solid $gray-light;\r\n    }\r\n  }\r\n\r\n  /* checked mark aspect changes */\r\n  [type='checkbox'] {\r\n    &:not(:checked) + label:after {\r\n      opacity: 0;\r\n      transform: scale(0);\r\n    }\r\n\r\n    &:checked + label:after {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n      border: 1px solid $black;\r\n    }\r\n  }\r\n\r\n  /* hover, focus */\r\n  [type='checkbox']:not(:disabled):checked:focus + label:after,\r\n  [type='checkbox']:not(:disabled):checked:hover + label:after,\r\n  [type='checkbox']:not(:disabled):not(:checked):focus + label:before,\r\n  [type='checkbox']:not(:disabled):not(:checked):hover + label:before {\r\n    border: 1px solid $blue;\r\n  }\r\n\r\n  /* disabled checkbox */\r\n  [type='checkbox']:disabled:not(:checked) + label:before,\r\n  [type='checkbox']:disabled:checked + label:after {\r\n    box-shadow: none;\r\n    border-color: $gray-light;\r\n    color: $gray-light;\r\n  }\r\n\r\n  [type='checkbox']:disabled + label {\r\n    cursor: auto;\r\n    color: $gray-bf;\r\n\r\n    a {\r\n      color: $gray-bf;\r\n      cursor: default;\r\n    }\r\n  }\r\n\r\n  [type='checkbox']:disabled + label.blueLink {\r\n    cursor: auto;\r\n\r\n    a {\r\n      color: $blue;;\r\n      cursor: default;\r\n    }\r\n  }\r\n\r\n  /* errors */\r\n  .cso-checkbox--errors {\r\n    color: $error;\r\n    margin-bottom: 0.65em;\r\n    padding-left: 27px;\r\n  }\r\n\r\n  &.has-error [type='checkbox'] + label:before {\r\n    border: 1px solid $error;\r\n  }\r\n}\r\n</style>\r\n"],"names":["_sfc_main","validatedInputField","CsoInfoIcon","_createElementBlock","_normalizeClass","_ctx","$props","_createElementVNode","$event","args","_hoisted_3","_createBlock","_component_cso_info_icon","_openBlock","_hoisted_4","_Fragment","_renderList","error","index","_toDisplayString"],"mappings":"sMAiCA,MAAKA,EAAU,CACb,KAAM,cACN,OAAQ,CAACC,CAAmB,EAC5B,MAAO,CACL,SAAU,CACR,KAAM,OACN,QAAS,SACV,EACD,SAAU,CACR,KAAM,QACN,SAAU,GACV,QAAS,EACV,EACD,SAAU,CACR,KAAM,QACN,SAAU,GACV,QAAS,EACX,CACD,EACD,WAAY,CACV,YAAAC,CACF,CACF,kFApCS,MAAM,sFAlBbC,EAyBM,MAAA,CAzBA,MAAKC,EAAA,CAAA,CAAA,YAAiBC,EAAgB,gBAAA,EAAA,8BAAiCC,EAAQ,QAAA,EAAA,CAAA,MACnFC,EAUwB,QAAA,CAVjB,KAAK,WACJ,GAAIF,EAAI,KACR,KAAMA,EAAI,KACV,kBAAiBA,EAAc,eAC/B,SAAUC,EAAQ,8CACVD,EAAY,aAAAG,GACpB,6BAAQH,EAAO,SAAAA,EAAA,QAAA,GAAAI,CAAA,GACf,8BAASJ,EAAO,SAAAA,EAAA,QAAA,GAAAI,CAAA,GAChB,4BAAOJ,EAAO,SAAAA,EAAA,QAAA,GAAAI,CAAA,GACd,4BAAOJ,EAAO,SAAAA,EAAA,QAAA,GAAAI,CAAA,GACd,2BAAMJ,EAAM,QAAAA,EAAA,OAAA,GAAAI,CAAA,mBALJJ,EAAY,YAAA,IAM5BE,EAIQ,QAAA,CAJA,IAAKF,EAAI,KAAG,kBAAoBC,EAAQ,QAAA,CAAA,IAC9CC,EAAuB,OAAA,CAAjB,UAAQF,EAAK,OAAA,KAAA,EAAAK,CAAA,EACEL,EAAI,UAAzBM,EACiCC,EAAA,OAAjB,QAASP,EAAI,2CAIpBA,EAAgB,kBAD3BQ,IAAAV,EAMM,MANNW,EAMM,EAJJD,EAAA,EAAA,EAAAV,EAGOY,EAHwB,KAAAC,EAAAX,EAAA,iBAAjB,CAAAY,EAAOC,KAArBL,EAAA,EAAAV,EAGO,QAFA,IAAKe,CACP,EAAAC,EAAAF,EAAM,OAAO,EAAA,CAAA"}