{"version":3,"sources":["webpack:///./src/components/UI/EditInput.vue?c1ca","webpack:///./src/components/UI/EditInput.vue","webpack:///src/components/UI/EditInput.vue","webpack:///./src/components/UI/EditInput.vue?47c0","webpack:///./src/components/UI/EditInput.vue?e8b4"],"names":["render","_vm","this","_c","_self","staticClass","_t","class","visible","on","toggleEdit","chevron","position","align","style","margin","_e","staticRenderFns","name","props","type","String","enum","default","data","Array","onSelectOption","Function","ref","randomString","methods","select","item","bus","$emit","length","text","possible","i","charAt","Math","floor","random","created","_this","$on","component"],"mappings":"yIAAA,W,yCCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,QAAQ,CAACF,EAAIK,GAAG,UAAU,GAAGH,EAAG,MAAM,CAACE,YAAY,qBAAqBE,MAAM,CAAC,SAAYN,EAAIO,SAASC,GAAG,CAAC,MAAQR,EAAIS,aAAa,CAACT,EAAIK,GAAG,gBAAgB,GAAIL,EAAIO,QAASL,EAAG,MAAM,CAACE,YAAY,mBAAmBE,MAAMN,EAAIU,QAAU,IAAMV,EAAIW,SAAW,IAAMX,EAAIY,MAAMC,MAAO,CAAC,WAAYb,EAAIc,SAAU,CAACZ,EAAG,MAAM,CAACE,YAAY,8BAA8B,CAACJ,EAAIK,GAAG,YAAY,GAAGH,EAAG,MAAM,CAACE,YAAY,6BAA6B,CAACJ,EAAIK,GAAG,YAAY,KAAKL,EAAIe,QAErjBC,EAAkB,G,YCyBP,GACfC,KAAA,aACAC,MAAA,CACAP,SAAA,CACAQ,KAAAC,OACAC,KAAA,gCACAC,QAAA,OAEAV,MAAA,CACAO,KAAAC,OACAC,KAAA,kCACAC,QAAA,YAEAH,KAAA,CAAAA,KAAAC,OAAAC,KAAA,qBAAAC,QAAA,QACAC,KAAA,CAAAJ,KAAAK,MAAAF,QAAA,sBACAZ,QAAA,CACAS,KAAAC,OACAC,KAAA,2DACAC,QAAA,QAEAR,OAAAM,OACAK,eAAAC,UAEAH,KAAA,WACA,OACAhB,SAAA,EACAoB,IAAA,KAAAC,aAAA,KAIAC,QAAA,CACAC,OAAA,SAAAC,GACA,KAAAN,gBAAA,KAAAA,eAAAM,IAGAtB,WAAA,WACAuB,OAAAC,MAAA,uBAAAN,KACA,KAAApB,SAAA,KAAAA,QACA,KAAA0B,MAAA,UAGAL,aAAA,SAAAM,GAIA,IAHA,IAAAC,EAAA,GACAC,EAAA,uCAEAC,EAAA,EAAAA,EAAAH,EAAAG,IACAF,GAAAC,EAAAE,OAAAC,KAAAC,MAAAD,KAAAE,SAAAL,EAAAF,SAEA,OAAAC,IAIAO,QAAA,eAAAC,EAAA,KACAX,OAAAY,IAAA,4BAAAjB,GACAgB,EAAAhB,UACAgB,EAAApC,SAAA,QClFiW,I,wBCQ7VsC,EAAY,eACd,EACA9C,EACAiB,GACA,EACA,KACA,WACA,MAIa,aAAA6B,E","file":"js/app~e2268e3b.db3604e5.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditInput.vue?vue&type=style&index=0&id=1609a2f8&prod&scoped=true&lang=scss\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"edit-input\"},[_c('label',[_vm._t(\"label\")],2),_c('div',{staticClass:\"edit-input__header\",class:{'selected': _vm.visible},on:{\"click\":_vm.toggleEdit}},[_vm._t(\"placeholder\")],2),(_vm.visible)?_c('div',{staticClass:\"edit-input__body\",class:_vm.chevron + ' ' + _vm.position + ' ' + _vm.align,style:({'--margin': _vm.margin})},[_c('div',{staticClass:\"edit-input__body__controls\"},[_vm._t(\"content\")],2),_c('div',{staticClass:\"edit-input__body__actions\"},[_vm._t(\"actions\")],2)]):_vm._e()])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"edit-input\">\r\n    <label>\r\n      <slot name=\"label\"></slot>\r\n    </label>\r\n    <div class=\"edit-input__header\" :class=\"{'selected': visible}\" @click=\"toggleEdit\">\r\n      <slot name=\"placeholder\"></slot>\r\n    </div>\r\n    <div\r\n        v-if=\"visible\"\r\n        class=\"edit-input__body\"\r\n        :class=\"chevron + ' ' + position + ' ' + align\"\r\n        :style=\"{'--margin': margin}\"\r\n    >\r\n      <div class=\"edit-input__body__controls\">\r\n        <slot name=\"content\"></slot>\r\n      </div>\r\n      <div class=\"edit-input__body__actions\">\r\n        <slot name=\"actions\"></slot>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport {bus} from \"@/helpers/bus\";\r\n\r\nexport default {\r\n  name: \"edit-input\",\r\n  props: {\r\n    position: {\r\n      type: String,\r\n      enum: [\"top\", \"right\", \"bottom\", \"left\"],\r\n      default: \"top\"\r\n    },\r\n    align: {\r\n      type: String,\r\n      enum: [\"al-start\", \"al-center\", \"al-end\"],\r\n      default: \"al-start\"\r\n    },\r\n    type: {type: String, enum: [\"list\", \"icon-list\"], default: \"list\"},\r\n    data: {type: Array, default: () => []},\r\n    chevron: {\r\n      type: String,\r\n      enum: [\"top-start\", \"top-end\", \"bottom-start\", \"bottom-end\", \"none\"],\r\n      default: \"none\"\r\n    },\r\n    margin: String,\r\n    onSelectOption: Function\r\n  },\r\n  data() {\r\n    return {\r\n      visible: false,\r\n      ref: this.randomString(3),\r\n    };\r\n  },\r\n\r\n  methods: {\r\n    select(item) {\r\n      if (this.onSelectOption) this.onSelectOption(item);\r\n    },\r\n\r\n    toggleEdit() {\r\n      bus.$emit(\"HIDE_ALL_MODALS\", this.ref);\r\n      this.visible = !this.visible;\r\n      this.$emit(\"reset\");\r\n    },\r\n\r\n    randomString(length) {\r\n      let text = \"\",\r\n          possible = \"abcdefghijklmnopqrstuvwxyz0123456789\";\r\n\r\n      for (let i = 0; i < length; i++)\r\n        text += possible.charAt(Math.floor(Math.random() * possible.length));\r\n\r\n      return text;\r\n    }\r\n  },\r\n\r\n  created() {\r\n    bus.$on(\"HIDE_ALL_MODALS\", ref => {\r\n      if (this.ref !== ref) {\r\n        this.visible = false;\r\n      }\r\n    });\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n\r\n$margin: \"10px\";\r\n\r\n.edit-input {\r\n  position: relative;\r\n  min-width: 20px;\r\n  min-height: 20px;\r\n  width: 100%;\r\n  display: inline-block;\r\n\r\n  label {\r\n    text-transform: uppercase;\r\n    font-size: .6rem;\r\n    color: color(bg-black3);\r\n    margin-bottom: 3px;\r\n\r\n    div {\r\n      font-weight: $font-medium;\r\n    }\r\n  }\r\n\r\n  &__header {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 35px;\r\n    border: 1px solid transparent;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 5px 0;\r\n\r\n    & > div {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      height: 100%;\r\n      color: color(bg-black2);\r\n      width: 100%;\r\n\r\n      span {\r\n        font-weight: $font-bold;\r\n        font-size: .9rem;\r\n      }\r\n\r\n      i {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    &:hover {\r\n      border: 1px solid color(border);\r\n      background: color(bg-gray3);\r\n      font-weight: $font-medium;\r\n      padding: 5px 10px;\r\n      border-radius: 5px;\r\n\r\n      i {\r\n        display: inline-block;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      background: color(bg-gray3);\r\n      border-radius: 5px;\r\n      padding: 5px 10px;\r\n      border: 1px solid color(bg-primary);\r\n\r\n      span {\r\n        font-weight: $font-bold;\r\n      }\r\n\r\n      div {\r\n        color: color(bg-primary);\r\n      }\r\n\r\n      i {\r\n        display: inline-block;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__body {\r\n    background: color(bg-fill);\r\n    border: 1px solid color(bg-primary);\r\n    border-radius: 3px;\r\n    width: 100%;\r\n    display: flex;\r\n    position: absolute;\r\n    flex-direction: column;\r\n    --margin: #{$margin};\r\n    z-index: 99999;\r\n\r\n    h2 {\r\n      border-bottom: 1px solid color(border);\r\n      background: color(bg-white);\r\n      border-radius: 3px 3px 0 0;\r\n      font-size: 0.7rem;\r\n      font-weight: $font-medium;\r\n      display: flex;\r\n      color: color(bg-black2);\r\n      align-items: center;\r\n      padding: 0 12px;\r\n      height: 35px;\r\n      width: 100%;\r\n    }\r\n\r\n    &__controls {\r\n      flex: 1;\r\n\r\n      .controls {\r\n        padding: 12px;\r\n      }\r\n    }\r\n\r\n    &__actions {\r\n      border-top: 1px solid color(border);\r\n      background: white;\r\n      padding: 0 12px;\r\n      border-radius: 0 0 3px 3px;\r\n\r\n      .actions {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, auto);\r\n        justify-items: end;\r\n        justify-content: end;\r\n        gap: 10px;\r\n        padding: 10px 0;\r\n      }\r\n    }\r\n\r\n    &.top-start,\r\n    &.top-end,\r\n    &.bottom-start,\r\n    &.bottom-end {\r\n      &:before {\r\n        position: absolute;\r\n        content: \"\";\r\n        width: 10px;\r\n        height: 10px;\r\n        border: 1px solid color(border);\r\n        border-right: none;\r\n        border-bottom: none;\r\n        border-top-left-radius: 3px;\r\n\r\n        background: white;\r\n      }\r\n    }\r\n\r\n    &.top-start {\r\n      &:before {\r\n        transform: rotate(45deg);\r\n        left: 10px;\r\n        top: -5.5px;\r\n      }\r\n    }\r\n\r\n    &.top-end {\r\n      &:before {\r\n        transform: rotate(45deg);\r\n        right: 10px;\r\n        top: -5.5px;\r\n      }\r\n    }\r\n\r\n    &.bottom-start {\r\n      &:before {\r\n        transform: rotate(-135deg);\r\n        left: 10px;\r\n        bottom: -5.5px;\r\n      }\r\n    }\r\n\r\n    &.bottom-end {\r\n      &:before {\r\n        transform: rotate(-135deg);\r\n        right: 10px;\r\n        bottom: -5.5px;\r\n      }\r\n    }\r\n\r\n    .chevron {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    &.top {\r\n      bottom: 100%;\r\n      margin-bottom: var(--margin);\r\n\r\n      &.al-start {\r\n        left: 0;\r\n      }\r\n\r\n      &.al-end {\r\n        right: 0;\r\n      }\r\n    }\r\n\r\n    &.right {\r\n      left: 100%;\r\n      margin-left: var(--margin);\r\n\r\n      &.al-start {\r\n        top: 0;\r\n      }\r\n\r\n      &.al-end {\r\n        bottom: 0;\r\n      }\r\n    }\r\n\r\n    &.bottom {\r\n      top: 100%;\r\n      margin-top: var(--margin);\r\n\r\n      &.al-start {\r\n        left: 0;\r\n      }\r\n\r\n      &.al-end {\r\n        right: 0;\r\n      }\r\n    }\r\n\r\n    &.left {\r\n      right: 100%;\r\n      margin-right: var(--margin);\r\n\r\n      &.al-start {\r\n        top: 0;\r\n      }\r\n\r\n      &.al-end {\r\n        bottom: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditInput.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditInput.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./EditInput.vue?vue&type=template&id=1609a2f8&scoped=true\"\nimport script from \"./EditInput.vue?vue&type=script&lang=js\"\nexport * from \"./EditInput.vue?vue&type=script&lang=js\"\nimport style0 from \"./EditInput.vue?vue&type=style&index=0&id=1609a2f8&prod&scoped=true&lang=scss\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"1609a2f8\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}