{"version":3,"file":"evalmee_chip-WDarsvxL.js","sources":["../../../app/javascript/components/shared/evalmee_chip.vue"],"sourcesContent":["<template>\n  <v-chip\n    v-bind=\"$attrs\"\n    v-on=\"$listeners\"\n    :x-small=\"xSmall\"\n    class=\"md-2 font-weight-bold px-2\"\n    :class=\"{\n      'outlined-with-white-background': outlinedWithWhiteBackground,\n    }\"\n    :color=\"parsedColor\"\n    :text-color=\"textColor\"\n    :outlined=\"parsedOutlined\"\n  >\n    <v-icon\n      left\n      :x-small=\"xSmall\"\n      :small=\"!xSmall\"\n      :color=\"iconColor\"\n      v-if=\"colorDot\"\n    >\n      mdi-checkbox-blank-circle\n    </v-icon>\n    <span\n      class=\"icon-background\"\n      v-if=\"iconBackgroundCircle\"\n    />\n    <v-icon\n      left\n      :x-small=\"xSmall\"\n      :small=\"!xSmall\"\n      :color=\"iconColor\"\n      :class=\"{\n        'mr-n1': iconOnly,\n        'ml-n1': iconOnly,\n        'small-icon': true,\n        'icon-only': iconOnly,\n      }\"\n      v-if=\"icon\"\n    >\n      {{ icon }}\n    </v-icon>\n\n    <div :class=\"{ 'ellipsis': ellipsis }\">\n      <slot v-if=\"!iconOnly\" />\n    </div>\n  </v-chip>\n</template>\n\n<script>\nexport default {\n  name: \"EvalmeeChip\",\n  props: {\n    outlined: { type: Boolean, default: false },\n    icon: { type: String, default: null },\n    color: { type: String, default: \"grey\" },\n    colorDot: { type: Boolean, default: false },\n    iconOnly: { type: Boolean, default: false },\n    xSmall: { type: Boolean, default: false },\n    ellipsis: { type: Boolean, default: false },\n    faded: { type: Boolean, default: false },\n    outlinedWithWhiteBackground: { type: Boolean, default: true },\n    iconBackgroundCircle: { type: Boolean, default: false },\n  },\n  computed: {\n    parsedColor() {\n      if(!this.outlined) return `${this.color} lighten-5`\n\n      return `${this.color} lighten-4`\n    },\n    parsedOutlined() {\n      if(this.colorDot) return true\n\n      return this.outlined\n    },\n    textColor() {\n      if(this.faded) return `${this.color} darken-2`\n\n      return `${this.color} darken-3`\n    },\n    iconColor() {\n      if(this.faded) return `${this.color} lighten-1`\n\n      return this.textColor\n    },\n  },\n  provide() {\n    return {\n      color: this.color,\n      borderColor: this.parsedColor,\n    }\n  },\n}\n</script>\n\n<style scoped>\n.ellipsis  {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.small-icon {\n  font-size: 14px !important;\n  line-height: 14px !important;\n}\n\n.small-icon:not(.icon-only) {\n  margin-left: 0 !important;\n}\n\n.outlined-with-white-background.v-chip--outlined.v-chip.v-chip{\n  background-color: white !important;\n}\n\n.icon-background::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    background: currentColor;\n    opacity: 0.15;\n    font-size: 14px;\n    text-align: center;\n    line-height: 16px;\n    display: block;\n    position: absolute;\n  vertical-align: middle;\n  transform: translate(-2px, -50%);\n}\n\n.icon-background {\n  vertical-align: middle;\n  display: inline-block;\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"mdAiDA,MAAAA,EAAA,CACA,KAAA,cACA,MAAA,CACA,SAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,KAAA,CAAA,KAAA,OAAA,QAAA,IAAA,EACA,MAAA,CAAA,KAAA,OAAA,QAAA,MAAA,EACA,SAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,SAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,OAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,SAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,MAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,4BAAA,CAAA,KAAA,QAAA,QAAA,EAAA,EACA,qBAAA,CAAA,KAAA,QAAA,QAAA,EAAA,CACA,EACA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,SAEA,GAAA,KAAA,KAAA,aAFA,GAAA,KAAA,KAAA,YAGA,EACA,gBAAA,CACA,OAAA,KAAA,SAAA,GAEA,KAAA,QACA,EACA,WAAA,CACA,OAAA,KAAA,MAAA,GAAA,KAAA,KAAA,YAEA,GAAA,KAAA,KAAA,WACA,EACA,WAAA,CACA,OAAA,KAAA,MAAA,GAAA,KAAA,KAAA,aAEA,KAAA,SACA,CACA,EACA,SAAA,CACA,MAAA,CACA,MAAA,KAAA,MACA,YAAA,KAAA,WACA,CACA,CACA"}