{"version":3,"sources":["webpack:///./src/components/AiMappingListInstance.vue?c747","webpack:///src/components/AiMappingListInstance.vue","webpack:///./src/components/AiMappingListInstance.vue?3f2c","webpack:///./src/components/AiMappingListInstance.vue?ab2b","webpack:///./src/components/AiMappingListInstance.vue?b0cf"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","is-disabled","isDisabled","attrs","draggable","dragHandle","on","dragstart","$event","$emit","drop","dragover","preventDefault","dragenter","dragleave","selected","mapping","expression","_v","_s","value","ref","title","click","onSelectVariable","variable","displayName","variablePrettyName","expressionToVariable","style","maxWidth","format","_e","left","slot","is-advanced","expressionView","opened","expand","$t","expressionExample","label","inactiveColor","model","callback","$$v","$set","mousedown","mouseleave","staticRenderFns","mappingLanguagReference","__webpack_require__","AiMappingListInstancevue_type_script_lang_js_","components","Checkbox","props","data","_this","hasFormat","variableExample","languageReference","getExpressionValueDebounce","getExpressionValue","methods","e","_this2","$store","dispatch","then","res","result","computed","variableHelpers","stringIsSingleVariable","name","removeBrackets","getters","combinedVariables","active","mappingDisplayName","language","watch","mapping.expression","handler","immediate","deep","components_AiMappingListInstancevue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_AiMappingListInstance_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_AiMappingListInstance_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"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","file":"js/lazy-view-components-AiMappingListInstance.a7a5e35f.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"ai-mapping-instance\",class:{ 'is-disabled': _vm.isDisabled },attrs:{\"draggable\":_vm.dragHandle},on:{\"dragstart\":function($event){return _vm.$emit('drag-element', $event)},\"drop\":function($event){return _vm.$emit('drop-element', $event)},\"dragover\":function($event){$event.preventDefault();},\"dragenter\":function($event){$event.preventDefault();},\"dragleave\":function($event){$event.preventDefault();}}},[_c('div',{staticClass:\"ai-variable\"},[_c('div',{staticClass:\"ai-value\",class:{ selected: _vm.mapping.expression }},[_c('p',[_vm._v(_vm._s(_vm.mapping.value))])])]),_c('div',{staticClass:\"spacer\"}),_c('div',{staticClass:\"user-input\"},[_c('div',{ref:\"wrapper\",staticClass:\"user-variable\"},[(!_vm.mapping.expression)?_c('div',[_c('button',{staticClass:\"select-variable\",on:{\"click\":function($event){return _vm.onSelectVariable($event)}}},[_vm._v(\"\\n          \"+_vm._s(_vm.$t(\"ai-sections.select-variable\"))+\"\\n        \")])]):_c('div',{staticClass:\"expression-instance\"},[(_vm.expressionView)?_c('div',{staticClass:\"advanced-expression ellipsis\",attrs:{\"title\":_vm.mapping.expression},on:{\"click\":function($event){return _vm.onSelectVariable($event)}}},[_vm._v(\"\\n          \"+_vm._s(_vm.mapping.expression)+\"\\n        \")]):_c('div',{staticClass:\"variable-expression\"},[_c('div',{staticClass:\"variable-name\"},[_c('span',{on:{\"click\":function($event){return _vm.onSelectVariable($event)}}},[_vm._v(\"\\n              \"+_vm._s(_vm.variable.displayName || _vm.variablePrettyName)+\"\\n            \")])]),(_vm.expressionToVariable.format)?_c('div',{staticClass:\"format-in-variable ellipsis\",style:({ maxWidth: _vm.maxWidth }),on:{\"click\":function($event){return _vm.$emit('on-format-variable', $event, _vm.mapping)}}},[_c('span',[_vm._v(\"\\n              \"+_vm._s(_vm.expressionToVariable.format)+\"\\n            \")])]):_vm._e()]),_c('dropdown',{attrs:{\"left\":\"\"}},[_c('span',{staticClass:\"format-toggle\",attrs:{\"slot\":\"toggle\"},slot:\"toggle\"},[_c('div',{staticClass:\"format-variable-btn\",class:{ 'is-advanced': _vm.expressionView, opened: _vm.expand },on:{\"click\":function($event){_vm.expand = !_vm.expand}}},[_c('i',{staticClass:\"fa-light fa-ellipsis-v-alt\"})])]),(!_vm.expressionView)?_c('div',{staticClass:\"dropdown-item\",on:{\"click\":function($event){return _vm.$emit('on-format-variable', $event, _vm.mapping)}}},[_vm._v(\"\\n            Format +\\n          \")]):_vm._e(),_c('div',{staticClass:\"dropdown-item\",on:{\"click\":function($event){return _vm.$emit('trash-variable')}}},[_c('span',[_vm._v(_vm._s(_vm.$t(\"remove\"))+\" \")]),_c('i',{staticClass:\"fa-light fa-trash\"})])])],1)])]),_c('div',{staticClass:\"variable-example\"},[_c('p',{staticClass:\"text-muted ellipsis\",attrs:{\"title\":_vm.expressionExample}},[_vm._v(\"\\n      \"+_vm._s(_vm.expressionExample || _vm.$t(\"ai-sections.no-example\"))+\"\\n    \")])]),_c('div',{staticClass:\"active-status\"},[_c('checkbox',{staticClass:\"checkbox\",attrs:{\"label\":'',\"inactiveColor\":'var(--charcoal-115)'},model:{value:(_vm.mapping.active),callback:function ($$v) {_vm.$set(_vm.mapping, \"active\", $$v)},expression:\"mapping.active\"}})],1),_c('div',{staticClass:\"drag-grip-mapping\",on:{\"mousedown\":function($event){_vm.dragHandle = true},\"mouseleave\":function($event){_vm.dragHandle = false}}},[_c('i',{staticClass:\"fa-light fa-grip-dots-vertical\"})]),_c('div',{staticClass:\"delete-mapping\",on:{\"click\":function($event){return _vm.$emit('on-remove-mapping')}}},[_c('i',{staticClass:\"fa-light fa-trash\"})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    class=\"ai-mapping-instance\"\n    :class=\"{ 'is-disabled': isDisabled }\"\n    :draggable=\"dragHandle\"\n    @dragstart=\"$emit('drag-element', $event)\"\n    @drop=\"$emit('drop-element', $event)\"\n    @dragover.prevent\n    @dragenter.prevent\n    @dragleave.prevent\n  >\n    <div class=\"ai-variable\">\n      <div class=\"ai-value\" :class=\"{ selected: mapping.expression }\">\n        <p>{{ mapping.value }}</p>\n      </div>\n    </div>\n    <div class=\"spacer\"></div>\n    <div class=\"user-input\">\n      <div class=\"user-variable\" ref=\"wrapper\">\n        <div v-if=\"!mapping.expression\">\n          <button class=\"select-variable\" @click=\"onSelectVariable($event)\">\n            {{ $t(\"ai-sections.select-variable\") }}\n          </button>\n        </div>\n\n        <div v-else class=\"expression-instance\">\n          <div\n            v-if=\"expressionView\"\n            @click=\"onSelectVariable($event)\"\n            :title=\"mapping.expression\"\n            class=\"advanced-expression ellipsis\"\n          >\n            {{ mapping.expression }}\n          </div>\n          <div v-else class=\"variable-expression\">\n            <div class=\"variable-name\">\n              <span @click=\"onSelectVariable($event)\">\n                {{ variable.displayName || variablePrettyName }}\n              </span>\n            </div>\n            <div\n              class=\"format-in-variable ellipsis\"\n              v-if=\"expressionToVariable.format\"\n              @click=\"$emit('on-format-variable', $event, mapping)\"\n              :style=\"{ maxWidth: maxWidth }\"\n            >\n              <span>\n                {{ expressionToVariable.format }}\n              </span>\n            </div>\n          </div>\n\n          <dropdown left>\n            <span slot=\"toggle\" class=\"format-toggle\">\n              <div\n                class=\"format-variable-btn\"\n                :class=\"{ 'is-advanced': expressionView, opened: expand }\"\n                @click=\"expand = !expand\"\n              >\n                <i class=\"fa-light fa-ellipsis-v-alt\"></i>\n              </div>\n            </span>\n            <div class=\"dropdown-item\" v-if=\"!expressionView\" @click=\"$emit('on-format-variable', $event, mapping)\">\n              Format +\n            </div>\n            <div class=\"dropdown-item\" @click=\"$emit('trash-variable')\">\n              <span>{{ $t(\"remove\") }} </span> <i class=\"fa-light fa-trash\"></i>\n            </div>\n          </dropdown>\n        </div>\n      </div>\n    </div>\n    <div class=\"variable-example\">\n      <p class=\"text-muted ellipsis\" :title=\"expressionExample\">\n        {{ expressionExample || $t(\"ai-sections.no-example\") }}\n      </p>\n    </div>\n    <div class=\"active-status\">\n      <checkbox class=\"checkbox\" :label=\"''\" v-model=\"mapping.active\" :inactiveColor=\"'var(--charcoal-115)'\"/>\n    </div>\n\n    <div class=\"drag-grip-mapping\" @mousedown=\"dragHandle = true\" @mouseleave=\"dragHandle = false\">\n      <i class=\"fa-light fa-grip-dots-vertical\"></i>\n    </div>\n\n    <div class=\"delete-mapping\" @click=\"$emit('on-remove-mapping')\">\n      <i class=\"fa-light fa-trash\"></i>\n    </div>\n  </div>\n</template>\n\n<script>\nimport VariableHelpers from \"@/assets/js/variableHelpers.js\";\nimport Checkbox from \"@/components/Checkbox\";\nimport debounce from \"lodash/debounce\";\nconst mappingLanguagReference = require(\"@/assets/js/mappingLanguageReference.json\");\nexport default {\n  components: {\n    Checkbox\n  },\n  props: {\n    mapping: Object\n  },\n  data() {\n    return {\n      hasFormat: false,\n      expand: false,\n      variableExample: \"\",\n      maxWidth: 100 + \"px\",\n      languageReference: mappingLanguagReference,\n      getExpressionValueDebounce: debounce((expression) => {\n        this.getExpressionValue(expression);\n      }, 500),\n      expressionExample: \"\",\n      dragHandle: false\n    };\n  },\n  methods: {\n    onSelectVariable(e) {\n      this.$emit(\"on-open-variable-list\", e, this.mapping);\n    },\n    getExpressionValue(expression) {\n      this.$store.dispatch(\"testExpression\", expression).then((res) => {\n        this.expressionExample = res.result ? res.result : this.$t(\"ai-sections.no-evaluate\");\n      });\n    }\n  },\n\n  computed: {\n    expressionToVariable() {\n      if (VariableHelpers.stringIsSingleVariable(this.mapping.expression)) {\n        return {\n          name: VariableHelpers.removeFormatting(this.mapping.expression),\n          format: VariableHelpers.getFormatting(this.mapping.expression)\n        };\n      } else return null;\n    },\n\n    variablePrettyName() {\n      return this.expressionToVariable ? VariableHelpers.removeBrackets(this.expressionToVariable.name) : \"test\";\n    },\n\n    variable() {\n      // return the actual variable, not the instance\n      if (this.expressionToVariable) {\n        const variable = this.$store.getters.combinedVariables[this.expressionToVariable.name];\n        return variable ? variable : { displayName: this.variablePrettyName, value: this.$t(\"ai-sections.no-value\") };\n      } else return null;\n    },\n\n    isDisabled() {\n      return this.mapping.expression && !this.mapping.active;\n    },\n\n    mappingDisplayName() {\n      const displayName = this.languageReference[this.mapping.value];\n      return displayName ? displayName[this.$store.getters.language] : this.mapping.value;\n    },\n\n    expressionView() {\n      return !VariableHelpers.stringIsSingleVariable(this.mapping.expression);\n    }\n  },\n  watch: {\n    \"mapping.expression\": {\n      handler: function() {\n        if (this.mapping.expression) this.getExpressionValueDebounce(this.mapping.expression);\n        this.$emit(\"expression-value\", this.mapping.expression);\n        this.expand = false;\n      },\n      immediate: true,\n      deep: true\n    }\n  }\n};\n</script>\n\n<style lang=\"less\">\n.ai-mapping-instance {\n  position: relative;\n  display: grid;\n  padding: 7px 12px;\n  //   grid-template-columns: repeat(5, 1fr);\n  grid-template-columns: minmax(max-content, 240px) 1px minmax(max-content, 300px) 3fr 86px;\n  align-items: center;\n  &:hover {\n    background: #6e757a50;\n  }\n  .ai-variable {\n    max-width: 240px;\n    padding-right: 48px;\n  }\n  .ai-value {\n    border-radius: 3px;\n    border: 1px solid #fff;\n    opacity: 0.5;\n    padding: 8px 12px;\n    margin-right: 18px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    p {\n      font-size: 14px;\n      font-weight: 700;\n      margin: 0;\n    }\n  }\n  .selected {\n    opacity: 1;\n  }\n  .spacer {\n    background-color: #fff;\n    height: 137%;\n  }\n  .spacer ~ .spacer {\n    height: 50%;\n  }\n  .user-variable {\n    margin-left: 18px;\n    white-space: nowrap;\n    padding-left: 48px;\n    .select-variable {\n      width: fit-content;\n      background: none;\n      border: none;\n      color: #fff;\n      opacity: 0.5;\n      border-radius: 3px;\n      border: 1px solid #fff;\n      padding: 8px 12px;\n      padding-right: 43px;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      &:hover {\n        opacity: 1;\n      }\n    }\n  }\n\n  .variable-example {\n    display: flex;\n    margin-left: 80px;\n    flex-direction: row;\n    max-width: 220px;\n    align-items: center;\n    p {\n      margin: 0;\n    }\n  }\n  .active-status {\n    width: 100%;\n    justify-self: end;\n    padding-bottom: 6px;\n    margin-right: 15px;\n    .container-checkbox .checkbox-check-indicator {\n      // background-color: var(--charcoal-115);\n    }\n    // .container-checkbox input:checked ~ .checkbox-check-indicator {\n    //   background-color: var(--orange-web);\n    // }\n  }\n\n  &.is-disabled {\n    .ai-variable {\n      opacity: 0.2;\n    }\n    .variable-expression,\n    .advanced-expression,\n    .format-in-variable,\n    .format-variable-btn {\n      opacity: 0.2;\n      &:hover {\n        opacity: 0.6;\n      }\n      .dropdown {\n        opacity: 1;\n      }\n      .menu {\n        opacity: 1;\n      }\n    }\n    .variable-example {\n      opacity: 0.4;\n    }\n  }\n\n  .drag-grip-mapping {\n    cursor: grab;\n    position: absolute;\n    right: 32px;\n    visibility: hidden;\n\n    &:focus {\n      cursor: grabbing;\n    }\n  }\n\n  .delete-mapping {\n    cursor: pointer;\n    position: absolute;\n    right: 6px;\n    visibility: hidden;\n  }\n}\n\n.ai-mapping-instance:hover {\n  .drag-grip-mapping,\n  .delete-mapping {\n    visibility: visible;\n  }\n}\n.user-input {\n  max-width: 300px;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.expression-instance {\n  z-index: 2;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  color: #fff;\n  gap: 2px;\n  max-width: 250px;\n\n  .variable-name,\n  .format-in-variable,\n  .advanced-expression {\n    cursor: pointer;\n    background: var(--flame);\n    // flex: 1 1 auto;\n    padding: 8px 12px;\n    font-weight: bold;\n    border-radius: 3px 0 0 3px;\n  }\n\n  .advanced-expression {\n    background: unset;\n    background: var(--charcoal-border);\n    border: 1px solid #fff;\n  }\n\n  .variable-expression {\n    display: inline-flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    color: #fff;\n    gap: 2px;\n  }\n\n  .format-in-variable {\n    font-weight: normal;\n    border-radius: 0;\n  }\n  .format-toggle {\n    width: 13px;\n    cursor: pointer;\n  }\n\n  .format-variable-btn,\n  .add-format-btn,\n  .trash-variable-btn {\n    border-radius: 0 3px 3px 0;\n    background: var(--flame);\n    padding: 8px 12px;\n    border: none;\n    color: #fff;\n\n    &.is-advanced {\n      background: unset;\n      background: var(--charcoal-border);\n      border: 1px solid #fff;\n    }\n  }\n\n  .add-format-btn,\n  .trash-variable-btn {\n    border-radius: 0;\n    background: #c0583a;\n  }\n  .trash-variable-btn {\n    // border-left: 2px solid var(--charcoal);\n    border-radius: 0 3px 3px 0;\n  }\n\n  .actions-wrapper {\n    position: relative;\n    z-index: 0;\n  }\n  .expand-actions {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    gap: 2px;\n    transform: translateY(-50%);\n  }\n  // .format-variable-btn.opened {\n  //   border-radius: 0px;\n  // }\n}\n\n.slide-enter-active,\n.slide-leave-active {\n  transition: all 0.1s;\n}\n.slide-enter-to {\n  width: 1px;\n  // transform: translateX(0px);\n  // opacity: 1;\n}\n.slide-enter,\n.slide-leave-to {\n  width: 100%;\n  // transform: translateX(-60px);\n  // opacity: 0;\n}\n@media only screen and (max-width: 1450px) {\n  .ai-mapping-instance {\n    .variable-example {\n      margin-left: 30px;\n    }\n  }\n}\n@media only screen and (max-width: 1250px) {\n  .ai-mapping-instance {\n    grid-template-columns: minmax(max-content, 120px) 1px minmax(max-content, 150px) 3fr 86px;\n    padding-right: 0;\n    .variable-example {\n      margin-left: 00px;\n      margin-right: 10%;\n    }\n    .ai-variable {\n      width: 110px;\n      display: flex;\n      justify-content: flex-start;\n      padding-right: 0;\n      margin: 0;\n    }\n\n    .ai-value {\n      margin: 0;\n      width: 100px;\n      padding-right: 0;\n    }\n    .user-variable {\n      padding: 0;\n      display: flex;\n      justify-content: flex-start;\n      align-items: flex-end;\n      .select-variable {\n        width: 100px;\n        font-size: 11px;\n        margin-right: 20px;\n        padding-left: 8px;\n      }\n    }\n    .variable-example {\n      margin-left: 30px;\n      max-width: 200px;\n    }\n  }\n  .active-status {\n    .container-checkbox .checkbox-check-indicator {\n      background-color: var(--charcoal-115);\n      // margin-right:120px;\n    }\n    // .container-checkbox input:checked ~ .checkbox-check-indicator {\n    //   background-color: var(--orange-web);\n    // }\n  }\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AiMappingListInstance.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AiMappingListInstance.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./AiMappingListInstance.vue?vue&type=template&id=0c68557f&\"\nimport script from \"./AiMappingListInstance.vue?vue&type=script&lang=js&\"\nexport * from \"./AiMappingListInstance.vue?vue&type=script&lang=js&\"\nimport style0 from \"./AiMappingListInstance.vue?vue&type=style&index=0&lang=less&\"\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  null,\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AiMappingListInstance.vue?vue&type=style&index=0&lang=less&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AiMappingListInstance.vue?vue&type=style&index=0&lang=less&\""],"sourceRoot":""}