{"version":3,"sources":["webpack:///./src/components/MultiSelect.vue?f3a8","webpack:///src/components/MultiSelect.vue","webpack:///./src/components/MultiSelect.vue?5356","webpack:///./src/components/MultiSelect.vue?4fe5","webpack:///./src/components/MultiSelect.vue?0df6"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","invalid","invalidInput","on","click","$event","stopPropagation","$refs","multiselect","focus","_l","selected","index","key","no-value","danger","_v","_s","label","value","directives","name","rawName","expression","attrs","tooltip","$t","handleRemoveByName","ref","not-empty","length","type","required","placeholder","domProps","keydown","indexOf","_k","keyCode","removeLatest","calculateMaxHeight","keyup","onUp","onDown","handleSelect","selectedIndex","blurOption","input","target","composing","listFilter","style","option","refInFor","selection","is-selected","map","s","includes","mouseenter","filteredOptions","_e","staticRenderFns","MultiSelectvue_type_script_lang_js_","props","source","options","fixedMaxHeight","data","yPos","windowHeight","listMaxHeight","computed","listStyles","maxHeight","minHeight","_this","filter","o","toLowerCase","result","join","methods","scrollIntoView","list","getBoundingClientRect","bottom","_this2","some","splice","findIndex","push","e","pop","top","window","innerHeight","mounted","_this3","values","split","match","find","val","watch","handler","$emit","components_MultiSelectvue_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_MultiSelect_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_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_MultiSelect_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"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","file":"js/lazy-view-components-MultiSelect.e05cb779.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"multiselect\",class:{ invalid: _vm.invalidInput },on:{\"click\":function($event){$event.stopPropagation();return _vm.$refs.multiselect.focus()}}},[_c('div',{staticClass:\"wrapper\"},[_vm._l((_vm.selected),function(selected,index){return _c('div',{key:index,staticClass:\"selected\",class:{ 'no-value': selected.danger },on:{\"click\":function($event){return _vm.$refs.multiselect.focus()}}},[_c('span',[_vm._v(_vm._s(selected.label || selected.value))]),_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(selected.danger),expression:\"selected.danger\"}],attrs:{\"tooltip\":_vm.$t('multiselect.no-value')}},[_c('i',{staticClass:\"fa-light fa-exclamation-circle\"})]),_c('span',{staticClass:\"remove-btn\",on:{\"click\":function($event){$event.stopPropagation();return _vm.handleRemoveByName(selected)}}},[_c('i',{staticClass:\"fa-light fa-times\"})])])}),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.listFilter),expression:\"listFilter\"}],ref:\"multiselect\",staticClass:\"multiselect-input select\",class:{ 'not-empty': _vm.selected.length > 0 },attrs:{\"type\":\"text\",\"required\":_vm.required,\"placeholder\":_vm.selected.length > 0 ? '' : _vm.placeholder},domProps:{\"value\":(_vm.listFilter)},on:{\"keydown\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"delete\",[8,46],$event.key,[\"Backspace\",\"Delete\",\"Del\"])){ return null; }return _vm.removeLatest()},\"focus\":function($event){return _vm.calculateMaxHeight()},\"keyup\":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"up\",38,$event.key,[\"Up\",\"ArrowUp\"])){ return null; }return _vm.onUp()},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"down\",40,$event.key,[\"Down\",\"ArrowDown\"])){ return null; }return _vm.onDown()},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\")){ return null; }$event.stopPropagation();return _vm.handleSelect(_vm.selectedIndex)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"esc\",27,$event.key,[\"Esc\",\"Escape\"])){ return null; }return _vm.blurOption($event)}],\"input\":function($event){if($event.target.composing){ return; }_vm.listFilter=$event.target.value}}}),_c('label',{staticClass:\"top-label\"},[_vm._v(_vm._s(_vm.label))])],2),_c('div',{staticClass:\"list-wrapper\"},[_c('div',{ref:\"list\",staticClass:\"list custom-scrollbar custom-scrollbar-light\",style:(_vm.listStyles)},[_vm._l((_vm.filteredOptions),function(option,index){return _c('label',{key:index,ref:'list-item-' + index,refInFor:true,class:{\n          selection: index === _vm.selectedIndex,\n          'is-selected': _vm.selected.map(function (s) { return s.value; }).includes(option.value)\n        },on:{\"keyup\":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\")){ return null; }$event.stopPropagation();return _vm.handleSelect(index)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"esc\",27,$event.key,[\"Esc\",\"Escape\"])){ return null; }return _vm.blurOption($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"up\",38,$event.key,[\"Up\",\"ArrowUp\"])){ return null; }return _vm.onUp()},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"down\",40,$event.key,[\"Down\",\"ArrowDown\"])){ return null; }return _vm.onDown()}],\"click\":function($event){$event.stopPropagation();return _vm.handleSelect(index)},\"focus\":function($event){_vm.selectedIndex = index},\"mouseenter\":function($event){_vm.selectedIndex = index}}},[_c('span',[_vm._v(_vm._s(option.label))])])}),(_vm.filteredOptions.length == 0)?_c('span',{staticClass:\"text-small text-muted\"},[_vm._v(_vm._s(_vm.$t(\"no-result\")))]):_vm._e()],2)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"multiselect\" @click.stop=\"$refs.multiselect.focus()\" :class=\"{ invalid: invalidInput }\">\n    <div class=\"wrapper\">\n      <div\n        class=\"selected\"\n        v-for=\"(selected, index) in selected\"\n        :key=\"index\"\n        @click=\"$refs.multiselect.focus()\"\n        :class=\"{ 'no-value': selected.danger }\"\n      >\n        <span>{{ selected.label || selected.value }}</span>\n        <span v-show=\"selected.danger\" :tooltip=\"$t('multiselect.no-value')\"\n          ><i class=\"fa-light fa-exclamation-circle\"></i\n        ></span>\n        <span @click.stop=\"handleRemoveByName(selected)\" class=\"remove-btn\">\n          <i class=\"fa-light fa-times\"></i>\n        </span>\n      </div>\n\n      <input\n        ref=\"multiselect\"\n        class=\"multiselect-input select\"\n        type=\"text\"\n        :required=\"required\"\n        :class=\"{ 'not-empty': selected.length > 0 }\"\n        :placeholder=\"selected.length > 0 ? '' : placeholder\"\n        v-model=\"listFilter\"\n        @keydown.delete=\"removeLatest()\"\n        @focus=\"calculateMaxHeight()\"\n        @keyup.up=\"onUp()\"\n        @keyup.down=\"onDown()\"\n        @keyup.stop.enter=\"handleSelect(selectedIndex)\"\n        @keyup.esc=\"blurOption($event)\"\n      />\n      <label class=\"top-label\">{{ label }}</label>\n    </div>\n\n    <div class=\"list-wrapper\">\n      <div class=\"list custom-scrollbar custom-scrollbar-light\" ref=\"list\" :style=\"listStyles\">\n        <label\n          v-for=\"(option, index) in filteredOptions\"\n          :key=\"index\"\n          :class=\"{\n            selection: index === selectedIndex,\n            'is-selected': selected.map((s) => s.value).includes(option.value)\n          }\"\n          :ref=\"'list-item-' + index\"\n          @keyup.stop.enter=\"handleSelect(index)\"\n          @click.stop=\"handleSelect(index)\"\n          @keyup.esc=\"blurOption($event)\"\n          @keyup.up=\"onUp()\"\n          @keyup.down=\"onDown()\"\n          @focus=\"selectedIndex = index\"\n          @mouseenter=\"selectedIndex = index\"\n        >\n          <span>{{ option.label }}</span>\n          <!-- <input type=\"checkbox\" :value=\"option\" v-model=\"selected\" @change=\"$refs.multiselect.focus()\" /> -->\n        </label>\n        <span v-if=\"filteredOptions.length == 0\" class=\"text-small text-muted\">{{ $t(\"no-result\") }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    name: [String, Number],\n    source: [String, Object],\n    value: [Number, String],\n    options: Array,\n    label: String,\n    placeholder: String,\n    required: Boolean,\n    invalidInput: Boolean,\n    fixedMaxHeight: Number\n  },\n  data() {\n    return {\n      selected: [],\n      listFilter: \"\",\n      selectedIndex: 0,\n      yPos: null,\n      windowHeight: null,\n      listMaxHeight: null\n    };\n  },\n\n  computed: {\n    listStyles() {\n      return {\n        maxHeight: this.fixedMaxHeight ? this.fixedMaxHeight + \"px\" : this.listMaxHeight + \"px\",\n        minHeight: this.fixedMaxHeight ? this.fixedMaxHeight + \"px\" : \"100px\"\n      };\n    },\n    filteredOptions() {\n      return this.options.filter((o) => o.label.toLowerCase().includes(this.listFilter.toLowerCase()));\n    },\n\n    result() {\n      return this.selected.map((s) => s.value).join(\"||\");\n    }\n  },\n\n  methods: {\n    onUp() {\n      this.$refs.multiselect.focus();\n      if (this.selectedIndex > 0) {\n        this.selectedIndex = this.selectedIndex - 1;\n      } else {\n        this.selectedIndex = this.filteredOptions.length - 1;\n      }\n      this.$refs[\"list-item-\" + this.selectedIndex][0].scrollIntoView();\n    },\n\n    onDown() {\n      this.$refs.multiselect.focus();\n      if (this.selectedIndex == this.filteredOptions.length - 1) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = this.selectedIndex + 1;\n      }\n\n      if (\n        this.$refs.list.getBoundingClientRect().bottom <\n          this.$refs[\"list-item-\" + this.selectedIndex][0].getBoundingClientRect().bottom ||\n        this.selectedIndex == 0\n      ) {\n        this.$refs[\"list-item-\" + this.selectedIndex][0].scrollIntoView(false);\n      }\n    },\n\n    handleSelect(index) {\n      if (index == (undefined || null) || this.filteredOptions.length <= 0) return;\n\n      if (this.selected.some((s) => s.value == this.filteredOptions[index].value)) {\n        this.selected.splice(this.selected.findIndex((s) => s.value == this.filteredOptions[index].value), 1);\n      } else this.selected.push(this.filteredOptions[index]);\n      this.$refs.multiselect.focus();\n    },\n\n    handleRemoveByName(name) {\n      this.selected.splice(this.selected.findIndex((s) => s == name), 1);\n    },\n\n    blurOption(e) {\n      e.target.blur();\n    },\n\n    removeLatest() {\n      if (this.listFilter.length == 0) {\n        this.selected.pop(1);\n      }\n    },\n\n    calculateMaxHeight() {\n      this.yPos = this.$refs.list.getBoundingClientRect().top;\n      this.windowHeight = window.innerHeight;\n      this.listMaxHeight = this.windowHeight - this.yPos - 20;\n    }\n  },\n  mounted() {\n    if (this.value) {\n      const values = this.value.split(\"||\");\n      values.forEach((val) => {\n        const match = this.options.find((o) => o.value == val);\n        if (match) {\n          this.selected.push(match);\n        } else {\n          this.selected.push({ value: val, danger: true });\n        }\n      });\n    }\n  },\n\n  watch: {\n    result: {\n      handler: function() {\n        this.$emit(\"value-change\", this.result);\n      }\n    },\n    listFilter: {\n      handler: function() {\n        this.selectedIndex = 0;\n      }\n    }\n  }\n};\n</script>\n\n<style lang=\"less\">\n.multiselect {\n  position: relative;\n  .top-label {\n    color: var(--text-grey-primary);\n    font-weight: 800;\n    cursor: pointer;\n    padding: 0 2px 0 0;\n    transform: translate(0px, 12px) scale(0.8);\n    transform-origin: 0 0;\n    margin-bottom: 8px;\n  }\n  .wrapper {\n    margin-top: 4px;\n    padding: 10px 0;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-bottom: 1px solid #ccc;\n    position: relative;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  .multiselect-input {\n    min-width: 10px;\n    outline: none;\n    border: none;\n    flex-grow: 1;\n    flex-basis: 40px;\n    &::placeholder {\n      opacity: 1;\n      color: #8f979c;\n      font-weight: 500;\n      max-width: 95%;\n    }\n  }\n  .selected {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    background: var(--background-white);\n    color: var(--orange-web);\n    border-radius: 4px;\n    border: 1px solid var(--orange-web);\n    max-width: 100%;\n    span {\n      padding: 0 4px;\n      &:first-of-type {\n        padding-right: 4px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      svg {\n        font-size: 10px;\n        padding-bottom: 1px;\n      }\n    }\n    .remove-btn {\n      border-left: 1px solid var(--orange-web);\n      &:hover {\n        cursor: pointer;\n        border-radius: 0 3px 3px 0;\n        background-color: var(--alabaster);\n      }\n    }\n\n    &.no-value {\n      border-color: var(--danger-red);\n      color: var(--danger-red);\n      .remove-btn {\n        border-color: var(--danger-red);\n      }\n    }\n  }\n  .list-wrapper {\n    border-radius: var(--standard-border-radius);\n    padding: 5px;\n    opacity: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 199;\n    pointer-events: none;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    background: #fff;\n  }\n  .list {\n    padding-top: 4px;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    pointer-events: none;\n\n    input {\n      display: none;\n    }\n  }\n\n  &:focus-within {\n    .list-wrapper {\n      transition: 0.2s;\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n  .list-wrapper:hover {\n    transition: 0.2s;\n    opacity: 1;\n    pointer-events: auto;\n    .list {\n      pointer-events: auto;\n    }\n  }\n\n  .list-wrapper label {\n    margin-bottom: 2px;\n    padding-left: 4px;\n  }\n\n  .selection {\n    background-color: var(--alabaster);\n  }\n\n  .is-selected {\n    color: var(--orange-web);\n  }\n  .top-label {\n    color: #8f979c;\n    font-weight: 500;\n    position: absolute;\n    top: 0;\n  }\n\n  .top-label,\n  .multiselect-input {\n    transition: all 0.2s;\n    touch-action: manipulation;\n  }\n  .multiselect-input:placeholder-shown + .top-label {\n    cursor: text;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    // transform: translate(-10px, 40px) scale(1);\n    transform: translate(0px, 12px);\n  }\n  .multiselect-input::-webkit-input-placeholder {\n    opacity: 0;\n    transition: inherit;\n  }\n  .multiselect-input:focus::-webkit-input-placeholder {\n    opacity: 1;\n  }\n  .multiselect-input:not(:placeholder-shown) + .top-label,\n  .multiselect-input:focus + .top-label,\n  .multiselect-input:-webkit-autofill + .top-label,\n  .multiselect-input.not-empty + .top-label {\n    transform: translate(0px, -18px) scale(0.8);\n    transform-origin: 0 0;\n    width: max-content;\n    padding: 0 2px 0 0;\n    color: inherit;\n    color: #8f979c;\n    font-weight: bold;\n    cursor: pointer;\n  }\n  .select {\n    background-image: url(\"../../src/assets/svg/chevronDown.svg\");\n    background-repeat: no-repeat;\n    background-position: 99% 50%;\n    background-size: 8px;\n  }\n\n  //   .wrapper(.multiselect-input:focus) {\n  //     border-bottom: 1px solid #666;\n  //   }\n\n  &.invalid {\n    .multiselect-input:focus + .top-label {\n      color: var(--danger-red) !important;\n    }\n    .wrapper {\n      border-bottom: 1px solid var(--danger-red);\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!./MultiSelect.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!./MultiSelect.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./MultiSelect.vue?vue&type=template&id=4284a346&\"\nimport script from \"./MultiSelect.vue?vue&type=script&lang=js&\"\nexport * from \"./MultiSelect.vue?vue&type=script&lang=js&\"\nimport style0 from \"./MultiSelect.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!./MultiSelect.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!./MultiSelect.vue?vue&type=style&index=0&lang=less&\""],"sourceRoot":""}