{"version":3,"sources":["webpack:///./src/views/files/List.vue?ae02","webpack:////home/vsts/work/1/s/gatherings-ui/packages/gatherings-storybook/src/icons/info-filled.svg","webpack:///./src/views/files/List.vue","webpack:///./src/utilities/search.js","webpack:///src/views/files/List.vue","webpack:///./src/views/files/List.vue?2295","webpack:///./src/views/files/List.vue?a1b0","webpack:///./src/views/files/List.vue?9edc"],"names":["module","exports","staticClass","_vm","attrs","scopedSlots","fn","on","model","value","searchTerm","callback","expression","_c","filterChange","_u","key","_s","filterSearchTerm","$set","fileTypes","onFileChange","headers","pageNumber","item","rawName","$event","deleteModal","items","showDelete","selectedFile","previewModal","editModal","show","$$v","itemStatuses","statusPanel","uploadQueue","name","showSnackbar","staticRenderFns","filter","filters","keys","Object","every","MAX_UPLOAD_SIZE_IN_MB","parseInt","props","components","MActionStatusPanel","MActionStatusPanelItem","MBulkSelectPanel","MButton","MCheckbox","MContextMenu","MContextMenuItem","MFilter","MPagination","MSearchInput","MSnackbar","MTable","MTableView","data","ecosystem","files","windowWidth","loading","selectedFiles","displayedFiles","text","sort","sortable","width","align","contextMenuProps","left","sortBy","sortDesc","perPage","allowedFileTypes","menuProps","attach","right","bottom","uploadedBy","appliedFilters","people","title","subtitle","maxWidth","height","file","message","subMessage","edit","fileName","watch","computed","currentEcosystemName","currentEcosystem","titleRowHeight","numberOfPages","filteredFiles","search","fileType","filteredUploadedBy","statusPanelTitle","pending","error","success","count","infoIcon","fileLoading","filesDownloading","formButtons","Submit","selectedDisplayedFiles","allDisplayedSelected","window","document","methods","dispatch","ecosystemId","payload","then","downloadFile","confirmDelete","n","color","buttonColor","icon","openEditFileModal","searchTable","toLocaleLowerCase","includes","formatDate","formatContentType","changeSize","getFileIcon","iconColor","validateFile","addFilesToQueue","fileSize","status","updateFilesInQueue","succeeded","errorMessage","updatePendingFilesError","pendingFiles","resetFilter","video","type","closePreview","closeEditModal","unselectAll","setDisplayedFiles","component"],"mappings":"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AyB,qBAAIC,SAAS,YAACT,EAAM,gBAAoB,WAAQ,iBAAO,CAACD,EAAG,MAAO,CACt0D,OACGqC,eAEJ,MAAe,Q,6GCLR,MAAMC,EAAS,CAACb,EAAOc,KAC5B,MAAMC,EAAOC,OAAOD,KAAKD,GAEzB,OAAOd,EAAMa,OAAOjB,GACXmB,EAAKE,MAAM7B,IAChB,MAAMyB,EAASC,EAAQ1B,GAEvB,MAAsB,qBAAXyB,IACW,oBAAXA,EAA8BA,EAAOjB,EAAMA,EAAKR,IACpDyB,IAAWjB,EAAKR,QAKdyB,I,yDCsQf,MAAMK,EAAwBC,SAAS,QAA8C,GAEtE,OACfC,sBACAC,YACAC,2CACAC,mDACAC,uCACAC,qBACAC,yBACAC,+BACAC,uCACAC,qBACAC,6BACAC,+BACAC,yBACAC,mBACAC,4BAEAC,OACA,OACAC,aACAC,SACAC,8BACAC,WACArC,oBACApB,gBACA0D,iBACAC,kBACA/C,SACA,CACAb,aACA6D,2CAEA,CACA7D,cACA6D,4CACAC,aACA,8FACA,wFACA,eACA,WAGA,CACA9D,oBACA6D,8CAEA,CACA7D,gBACA6D,0CAEA,CACA7D,aACA+D,YACAC,aACAC,iBAGAC,kBACAC,QACA,qBAEAC,iBACAC,YACAvD,aACAwD,WACAC,yDACA3C,eACAD,aACAH,QACAgD,WACAC,yBACAC,SACAC,YAGA7C,gBACArB,oBACAwB,SACAtB,0BACAiE,eAEAC,gBACAlE,0BACAiE,eAEAE,UACAnE,kCACAW,cACAE,QACAuD,WACAC,cACAhB,aACAiB,eACAC,cACAC,UACAC,cAEA7D,WACAC,SAEAN,aACAM,QACAuD,2CACAK,gEACAC,oDACArB,qDACA7C,UAEAmE,MACAC,iBAIAC,OACA5D,eACA,0CAEA,YACA,oCAGA,sBACA,IACA,sBAGA,4BACA,6BACA,oCAIA6D,UACAC,uBACA,OAAA7D,iCACA,iDACA,eACA,4BACA8D,IACA,MAGA,eAEAC,iBACA,4DAEAC,gBACA,0CACA,SAEA,6CACA,yCAEA,6DAEAC,gBACA,SACAC,WAAA,6DACAnB,eAAA,QACA,iBAAAA,GAAA,oBACA,OACA,UACAA,wHACA,iDAGAoB,aACA,4CACA,gBAAArF,GAAA,oBACA,iCAGA,kBACA,UAEAsF,qBACA,kBAMA,OALAnB,eACA,yEACA,WAGA,GAEAoB,mBACA,cAAAC,QAAAC,UAAAC,GAAA,kBAEA,WACA,oCAAAC,UAGA,IACA,sCAAAA,UAGA,IACA,mCAAAA,UAGA,MAEA5E,eACA,OACAyE,UACAE,UACAD,WACA,kDAGAG,WACA,YAEAC,cACA,iDAEAC,mBACA,sDAEAC,cACA,OACAC,QACAnF,WAIAoF,yBACA,+EAEAC,uBACA,yEAGA,gBACAC,yEACAC,gEAGA,sBACA,kBACA,iBAEAC,SACA,yBACA,iEACA,0EACA,sFAEA,0BACA,YACAC,yBACAC,6BACA/B,uBACAgC,YAEAC,uBAEAC,gBACA,2CAAAlC,OAAA+B,gCAEAI,iBACA,uBACA9D,WACA,mCAAA+D,aACA,qCAEA,yBACA/D,WACA,0DACA,wDAEA,yBACA,0BAEA,qBACA,yCAAAE,aACA,UAKA,qCACAwD,6BACA1D,UAEA,SACA,2DAUA,OATA,yBACA,yCAAAE,kBACA,0CACA8D,YACApC,UACAC,0DACAoC,oBACAC,2BAKA,yCAAAhE,aACA,0EACA,0CACA8D,cACApC,qDACAmC,gCACAxG,sDAEA0G,oBACAC,oCAEA,4BACA,yBACA,0EAEAC,qBACA,uBACA,qBAEAC,eAGA,QAFA,uBAIA,0GACAC,oBACAC,+CACA/G,8EANA,GAUAgH,cACA,SACA,yDADA,MAGAC,qBACA,SAEA,sBACA,sCAGA,qBACA,wCAGA,qBACA,wCAGA,EAdA,4BAgBAC,cACA,eAEA,+BACA,mBAEA,qCACA,qCAOAC,eACA,iCACA,CAAAR,sBAAAS,qBAGA,0BACA,CAAAT,wBAAAS,qBAGA,0BACA,CAAAT,wBAAAS,qBAGA,CAAAT,kBAAAS,sBAOAC,gBACA,oDAGA,mBACA,2CAGA,KANA,4CAYAC,mBACA,gBAEA,6BACA,sBAGA,uBACAlD,OACAC,UACAkD,gCACAC,8BACA,MAQA3H,gBAEA,YAAA4C,GAAA,yBAEA,wBAGA,yBACA,qBAGA,iBACA,+BAOA,qBACA,IACA,mDACA0D,6BACA1D,WAGA,QAAA4B,OAAA9B,GAAA,OAEA,mBAKA,uEAJA,iCAEA,kBAIA,SAEA,iCAOAkF,sBACA,yDAEAhF,YAAA3B,OAAA4G,YAAAC,mBACA,wCAEA,SACA,aAEA,EACA3H,oBAEAA,iBACAA,iBAQA4H,0BACA,yDAEAC,cACA7H,iBACAA,+CAGAV,gBACA,yBACA8B,qCACAA,+BAEA0G,cACA,yBACA1G,mCAAAxB,aAAAiE,gBACAzC,4BAAAxB,aAAAiE,iBAKA,uBAYA,GAVA,oBAEA,+BACA,0BACA,gCACA,0CACA,2BACA,uEAGA,cAMA,8DACA,wBACAkE,iBACAC,wBAEA,CACA,WAAAzF,SAAA,wCACA6B,OACA+B,+BAGA,4CAAA6B,mBAfA,qEAqBAC,eACA,0BACA,6BAEAC,iBACA,uBACA,kCAEAC,cACA,uBAEAC,qBACA,uBAKA/H,cACA,oBACA,+BACA,4BCt0ByZ,I,kCCSrZgI,EAAY,eACd,EACA,EACArH,GACA,EACA,KACA,WACA,MAIa,aAAAqH,E,2CCpBf,W","file":"js/FilesList.bafda216.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../../node_modules/@vue/cli-service/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/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./List.vue?vue&type=style&index=0&id=403d5d3a&prod&scoped=true&lang=scss&\"","module.exports = __webpack_public_path__ + \"img/info-filled.d38a1b76.svg\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('v-container',{staticClass:\"mt-md-12\"},[_c('v-row',[_c('v-col',[_c('v-container',{staticClass:\"files-list\"},[_c('v-row',{style:({ maxHeight: _vm.titleRowHeight })},[_c('v-col',{staticClass:\"files-list__heading\",attrs:{\"cols\":\"8\",\"sm\":7}},[_c('c-page-heading',{attrs:{\"heading\":_vm.$t('files.list.manage'),\"subheading\":_vm.currentEcosystemName}})],1)],1),_c('v-row',[_c('v-col',{staticClass:\"text-left\",attrs:{\"cols\":\"12\",\"sm\":7}},[_c('div',{staticClass:\"sub-title font-weight-light\",attrs:{\"data-cy\":\"uploadDownloadAndViewFiles\"}},[_vm._v(\" \"+_vm._s(_vm.$t('files.list.uploadDownloadAndViewFiles'))+\" \")])])],1),_c('v-row',[_c('v-col',[_c('m-table-view',{scopedSlots:_vm._u([{key:\"toolbar\",fn:function(){return [_c('div',{staticClass:\"table-toolbar\"},[_c('m-search-input',{staticClass:\"table-search-bar\",attrs:{\"placeholder\":_vm.$t('files.searchForFiles')},on:{\"clear\":function($event){_vm.searchTerm = null}},model:{value:(_vm.searchTerm),callback:function ($$v) {_vm.searchTerm=$$v},expression:\"searchTerm\"}}),_c('m-filter',{attrs:{\"filters\":_vm.filters,\"activatorLabel\":_vm.$t('files.filter.buttons.activator'),\"applyLabel\":_vm.$t('files.filter.buttons.apply'),\"resetLabel\":_vm.$t('files.filter.buttons.reset')},on:{\"filterChange\":function($event){return _vm.filterChange($event)},\"reset\":_vm.resetFilter},scopedSlots:_vm._u([{key:\"default\",fn:function(){return [_c('div',{staticClass:\"menu-content-container\"},[_c('div',{staticClass:\"menu-content\"},[_c('div',{staticClass:\"menu-content-search\"},[_c('span',{staticClass:\"menu-title\"},[_vm._v(_vm._s(_vm.$t('files.filter.uploadedBy')))]),_c('m-search-input',{staticClass:\"search\",attrs:{\"placeholder\":_vm.$t('files.filter.search')},on:{\"clear\":function($event){_vm.filterSearchTerm = ''}},model:{value:(_vm.filterSearchTerm),callback:function ($$v) {_vm.filterSearchTerm=$$v},expression:\"filterSearchTerm\"}}),_c('div',{staticClass:\"list-items-uploaded-by\"},[(!_vm.filteredUploadedBy.length)?_c('div',{staticClass:\"no-results-found\"},[_c('p',[_vm._v(_vm._s(_vm.$t('files.filter.noResultsFound')))])]):_vm._l((_vm.filteredUploadedBy),function(value){return _c('div',{key:value},[_c('div',{staticClass:\"checkbox\"},[_c('div',[_c('m-checkbox',{attrs:{\"value\":value,\"label\":value},model:{value:(_vm.filters.uploadedBy),callback:function ($$v) {_vm.$set(_vm.filters, \"uploadedBy\", $$v)},expression:\"filters.uploadedBy\"}})],1)])])})],2)],1)]),_c('div',{staticClass:\"menu-content\"},[_c('span',{staticClass:\"menu-title\"},[_vm._v(_vm._s(_vm.$t('files.filter.fileTypes')))]),_c('div',{staticClass:\"list-items-file-type\"},_vm._l((_vm.fileTypes),function(value){return _c('div',{key:value},[_c('div',{staticClass:\"checkbox\"},[_c('div',[_c('m-checkbox',{attrs:{\"value\":value,\"label\":_vm.formatContentType(value)},model:{value:(_vm.filters.fileTypes),callback:function ($$v) {_vm.$set(_vm.filters, \"fileTypes\", $$v)},expression:\"filters.fileTypes\"}})],1)])])}),0)])])]},proxy:true}])}),_c('input',{ref:\"upload\",attrs:{\"type\":\"file\",\"accept\":_vm.allowedFileTypes,\"hidden\":\"\",\"multiple\":\"\"},on:{\"change\":_vm.onFileChange}}),_c('m-button',{attrs:{\"label\":_vm.$t('files.add.uploadFile')},on:{\"click\":function($event){return _vm.$refs.upload.click()}}})],1)]},proxy:true},{key:\"default\",fn:function(){return [_c('m-table',{staticClass:\"files-list__table\",attrs:{\"showSelect\":\"\",\"items\":_vm.filteredFiles,\"headers\":_vm.headers,\"page\":_vm.pageNumber,\"items-per-page\":+_vm.perPage,\"disablePagination\":false,\"sort-by\":_vm.sortBy,\"sort-desc\":_vm.sortDesc,\"droppable\":\"\"},on:{\"update:page\":function($event){_vm.pageNumber=$event},\"update:sortBy\":function($event){_vm.sortBy=$event},\"update:sort-by\":function($event){_vm.sortBy=$event},\"update:sortDesc\":function($event){_vm.sortDesc=$event},\"update:sort-desc\":function($event){_vm.sortDesc=$event},\"drop\":_vm.onFileChange,\"current-items\":_vm.setDisplayedFiles},scopedSlots:_vm._u([{key:\"item.name\",fn:function({ item }){return [_c('a',{staticClass:\"file-name\",on:{\"click\":function($event){return _vm.preview(item)}}},[_vm._v(_vm._s(item.name))])]}},{key:\"item.owner\",fn:function({ item }){return [_vm._v(\" \"+_vm._s(item.owner ? `${item.owner.givenName} ${item.owner.surname}` : _vm.$t('files.filter.nA'))+\" \")]}},{key:\"item.created\",fn:function({ item }){return [_vm._v(\" \"+_vm._s(_vm.formatDate(item.created))+\" \")]}},{key:\"item.contentType\",fn:function({ item }){return [_vm._v(\" \"+_vm._s(_vm.formatContentType(item.contentType))+\" \")]}},{key:\"item.menu\",fn:function({ item }){return [_c('m-context-menu',{attrs:{\"icon\":\"more-vert-filled\",\"menuProps\":_vm.contextMenuProps}},[_c('m-context-menu-item',{attrs:{\"icon\":\"edit-stroke\",\"data-cy\":`edit-file-${item.id}-btn`},on:{\"click\":function($event){return _vm.openEditFileModal(item)}}},[_vm._v(\" \"+_vm._s(_vm.$t('files.list.edit'))+\" \")]),_c('m-context-menu-item',{attrs:{\"icon\":\"download-stroke\",\"data-cy\":`download-file-${item.id}-btn`,\"disabled\":_vm.filesDownloading.includes(item) || item.contentType?.includes('video/')},on:{\"click\":function($event){return _vm.downloadFile(item)}}},[_vm._v(\" \"+_vm._s(_vm.filesDownloading.includes(item) ? _vm.$t('files.list.downloading') : _vm.$t('files.list.download'))+\" \")]),_c('m-context-menu-item',{attrs:{\"icon\":\"delete-stroke\",\"error\":\"\",\"data-cy\":`remove-file-${item.id}-btn`},on:{\"click\":function($event){return _vm.confirmDelete([item])}}},[_vm._v(\" \"+_vm._s(_vm.$t('files.list.delete'))+\" \")])],1)]}}]),model:{value:(_vm.selectedFiles),callback:function ($$v) {_vm.selectedFiles=$$v},expression:\"selectedFiles\"}})]},proxy:true},{key:\"footer\",fn:function(){return [_c('v-divider',{staticClass:\"mb-5\"}),_c('m-pagination',{attrs:{\"total\":_vm.filteredFiles.length,\"pageNumber\":_vm.pageNumber,\"perPage\":_vm.perPage},on:{\"prev\":function($event){_vm.pageNumber--},\"next\":function($event){_vm.pageNumber++},\"perPage\":_vm.changeSize}})]},proxy:true}])})],1)],1)],1)],1)],1),_c('m-bulk-select-panel',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.selectedFiles.length > 0),expression:\"selectedFiles.length > 0\"}],attrs:{\"quantity\":_vm.selectedFiles.length,\"name\":\"file\"},on:{\"unselect-all\":_vm.unselectAll,\"bulk-action\":function($event){return _vm.confirmDelete(_vm.selectedFiles)}}}),_c('c-delete-modal',{attrs:{\"deleteModal\":_vm.deleteModal},on:{\"close\":function($event){_vm.deleteModal.show = false\n      _vm.deleteModal.items = null},\"delete\":_vm.deleteFiles}}),_c('c-file-preview-modal',{attrs:{\"title\":_vm.previewModal.title,\"subtitle\":_vm.previewModal.subtitle,\"file\":_vm.previewModal.file,\"message\":_vm.previewModal.message,\"loading\":_vm.fileLoading},on:{\"delete\":function($event){return _vm.showDelete(_vm.selectedFile)},\"download\":function($event){return _vm.downloadFile(_vm.selectedFile)},\"edit\":function($event){return _vm.openEditFileModal(_vm.selectedFile)},\"close\":function($event){return _vm.closePreview()}},model:{value:(_vm.previewModal.show),callback:function ($$v) {_vm.$set(_vm.previewModal, \"show\", $$v)},expression:\"previewModal.show\"}}),_c('c-edit-file-modal',{attrs:{\"file\":_vm.selectedFile},on:{\"update\":function($event){return _vm.updateFile($event)},\"delete\":function($event){return _vm.confirmDelete([_vm.selectedFile])},\"close\":function($event){_vm.editModal.show = false},\"preview\":function($event){return _vm.preview(_vm.selectedFile)}},model:{value:(_vm.editModal.show),callback:function ($$v) {_vm.$set(_vm.editModal, \"show\", $$v)},expression:\"editModal.show\"}}),_c('m-action-status-panel',{attrs:{\"id\":\"upload-panel\",\"menuProps\":_vm.statusPanel.menuProps,\"title\":_vm.statusPanelTitle,\"showClose\":_vm.itemStatuses.pending === 0,\"bottom\":\"\",\"right\":\"\"},model:{value:(_vm.statusPanel.show),callback:function ($$v) {_vm.$set(_vm.statusPanel, \"show\", $$v)},expression:\"statusPanel.show\"}},_vm._l((_vm.uploadQueue),function(item,index){return _c('m-action-status-panel-item',{key:item.file.name + index,attrs:{\"status\":item.status,\"icon\":item.icon,\"iconColor\":item.iconColor,\"title\":item.file.name,\"subtitle\":item.message || item.fileSize}})}),1),_c('m-snackbar',{model:{value:(_vm.showSnackbar),callback:function ($$v) {_vm.showSnackbar=$$v},expression:\"showSnackbar\"}},[_c('img',{attrs:{\"src\":_vm.infoIcon,\"width\":\"24\"}}),_vm._v(\" \"+_vm._s(_vm.$t('files.add.dragAndDropFilesToUpload'))+\" \")])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export const filter = (items, filters) => {\n  const keys = Object.keys(filters)\n\n  return items.filter(item => {\n    return keys.every(key => {\n      const filter = filters[key]\n\n      if (typeof filter === 'undefined') return true\n      if (typeof filter === 'function') return filter(item, item[key])\n      return filter === item[key]\n    })\n  })\n}\n\nexport default filter\n","<template>\n  <v-container class=\"mt-md-12\">\n    <v-row>\n      <v-col>\n        <v-container class=\"files-list\">\n          <v-row :style=\"{ maxHeight: titleRowHeight }\">\n            <v-col class=\"files-list__heading\" cols=\"8\" :sm=\"7\">\n              <c-page-heading :heading=\"$t('files.list.manage')\" :subheading=\"currentEcosystemName\">\n              </c-page-heading>\n            </v-col>\n          </v-row>\n          <v-row>\n            <v-col cols=\"12\" :sm=\"7\" class=\"text-left\">\n              <div class=\"sub-title font-weight-light\" data-cy=\"uploadDownloadAndViewFiles\">\n                {{ $t('files.list.uploadDownloadAndViewFiles') }}\n              </div>\n            </v-col>\n          </v-row>\n\n          <v-row>\n            <v-col>\n              <m-table-view>\n                <template v-slot:toolbar>\n                  <div class=\"table-toolbar\">\n                    <m-search-input\n                      v-model=\"searchTerm\"\n                      :placeholder=\"$t('files.searchForFiles')\"\n                      class=\"table-search-bar\"\n                      @clear=\"searchTerm = null\"\n                    ></m-search-input>\n                    <m-filter\n                      :filters=\"filters\"\n                      @filterChange=\"filterChange($event)\"\n                      @reset=\"resetFilter\"\n                      :activatorLabel=\"$t('files.filter.buttons.activator')\"\n                      :applyLabel=\"$t('files.filter.buttons.apply')\"\n                      :resetLabel=\"$t('files.filter.buttons.reset')\"\n                    >\n                      <template v-slot:default>\n                        <div class=\"menu-content-container\">\n                          <div class=\"menu-content\">\n                            <div class=\"menu-content-search\">\n                              <span class=\"menu-title\">{{ $t('files.filter.uploadedBy') }}</span>\n                              <m-search-input\n                                class=\"search\"\n                                :placeholder=\"$t('files.filter.search')\"\n                                v-model=\"filterSearchTerm\"\n                                @clear=\"filterSearchTerm = ''\"\n                              />\n                              <div class=\"list-items-uploaded-by\">\n                                <div class=\"no-results-found\" v-if=\"!filteredUploadedBy.length\">\n                                  <p>{{ $t('files.filter.noResultsFound') }}</p>\n                                </div>\n                                <div v-else v-for=\"value in filteredUploadedBy\" :key=\"value\">\n                                  <div class=\"checkbox\">\n                                    <div>\n                                      <m-checkbox\n                                        :value=\"value\"\n                                        v-model=\"filters.uploadedBy\"\n                                        :label=\"value\"\n                                      />\n                                    </div>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                          <div class=\"menu-content\">\n                            <span class=\"menu-title\">{{ $t('files.filter.fileTypes') }}</span>\n                            <div class=\"list-items-file-type\">\n                              <div v-for=\"value in fileTypes\" :key=\"value\">\n                                <div class=\"checkbox\">\n                                  <div>\n                                    <m-checkbox\n                                      :value=\"value\"\n                                      v-model=\"filters.fileTypes\"\n                                      :label=\"formatContentType(value)\"\n                                    />\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      </template>\n                    </m-filter>\n                    <input\n                      type=\"file\"\n                      ref=\"upload\"\n                      :accept=\"allowedFileTypes\"\n                      hidden\n                      multiple\n                      @change=\"onFileChange\"\n                    />\n                    <m-button\n                      :label=\"$t('files.add.uploadFile')\"\n                      @click=\"$refs.upload.click()\"\n                    ></m-button>\n                  </div>\n                </template>\n                <template #default>\n                  <m-table\n                    v-model=\"selectedFiles\"\n                    class=\"files-list__table\"\n                    showSelect\n                    :items=\"filteredFiles\"\n                    :headers=\"headers\"\n                    :page.sync=\"pageNumber\"\n                    :items-per-page=\"+perPage\"\n                    :disablePagination=\"false\"\n                    :sort-by.sync=\"sortBy\"\n                    :sort-desc.sync=\"sortDesc\"\n                    droppable\n                    @drop=\"onFileChange\"\n                    v-on:current-items=\"setDisplayedFiles\"\n                  >\n                    <template #item.name=\"{ item }\">\n                      <a class=\"file-name\" @click=\"preview(item)\">{{ item.name }}</a>\n                    </template>\n                    <template #item.owner=\"{ item }\">\n                      {{\n                        item.owner\n                          ? `${item.owner.givenName} ${item.owner.surname}`\n                          : $t('files.filter.nA')\n                      }}\n                    </template>\n                    <template #item.created=\"{ item }\">\n                      {{ formatDate(item.created) }}\n                    </template>\n\n                    <template #item.contentType=\"{ item }\">\n                      {{ formatContentType(item.contentType) }}\n                    </template>\n\n                    <template #item.menu=\"{ item }\">\n                      <m-context-menu icon=\"more-vert-filled\" :menuProps=\"contextMenuProps\">\n                        <m-context-menu-item\n                          icon=\"edit-stroke\"\n                          :data-cy=\"`edit-file-${item.id}-btn`\"\n                          @click=\"openEditFileModal(item)\"\n                        >\n                          {{ $t('files.list.edit') }}\n                        </m-context-menu-item>\n                        <m-context-menu-item\n                          icon=\"download-stroke\"\n                          :data-cy=\"`download-file-${item.id}-btn`\"\n                          @click=\"downloadFile(item)\"\n                          :disabled=\"\n                            filesDownloading.includes(item) || item.contentType?.includes('video/')\n                          \"\n                        >\n                          {{\n                            filesDownloading.includes(item)\n                              ? $t('files.list.downloading')\n                              : $t('files.list.download')\n                          }}\n                        </m-context-menu-item>\n                        <m-context-menu-item\n                          icon=\"delete-stroke\"\n                          error\n                          :data-cy=\"`remove-file-${item.id}-btn`\"\n                          @click=\"confirmDelete([item])\"\n                        >\n                          {{ $t('files.list.delete') }}\n                        </m-context-menu-item>\n                      </m-context-menu>\n                    </template>\n                  </m-table>\n                </template>\n\n                <template #footer>\n                  <v-divider class=\"mb-5\"></v-divider>\n\n                  <m-pagination\n                    :total=\"filteredFiles.length\"\n                    :pageNumber=\"pageNumber\"\n                    :perPage=\"perPage\"\n                    v-on:prev=\"pageNumber--\"\n                    v-on:next=\"pageNumber++\"\n                    v-on:perPage=\"changeSize\"\n                  />\n                </template>\n              </m-table-view>\n            </v-col>\n          </v-row>\n        </v-container>\n      </v-col>\n    </v-row>\n\n    <m-bulk-select-panel\n      v-show=\"selectedFiles.length > 0\"\n      :quantity=\"selectedFiles.length\"\n      name=\"file\"\n      v-on:unselect-all=\"unselectAll\"\n      v-on:bulk-action=\"confirmDelete(selectedFiles)\"\n    ></m-bulk-select-panel>\n\n    <c-delete-modal\n      :deleteModal=\"deleteModal\"\n      v-on:close=\"\n        deleteModal.show = false\n        deleteModal.items = null\n      \"\n      v-on:delete=\"deleteFiles\"\n    />\n\n    <c-file-preview-modal\n      v-model=\"previewModal.show\"\n      :title=\"previewModal.title\"\n      :subtitle=\"previewModal.subtitle\"\n      :file=\"previewModal.file\"\n      :message=\"previewModal.message\"\n      :loading=\"fileLoading\"\n      @delete=\"showDelete(selectedFile)\"\n      @download=\"downloadFile(selectedFile)\"\n      @edit=\"openEditFileModal(selectedFile)\"\n      @close=\"closePreview()\"\n    />\n\n    <c-edit-file-modal\n      v-model=\"editModal.show\"\n      :file=\"selectedFile\"\n      @update=\"updateFile($event)\"\n      @delete=\"confirmDelete([selectedFile])\"\n      @close=\"editModal.show = false\"\n      @preview=\"preview(selectedFile)\"\n    />\n\n    <m-action-status-panel\n      id=\"upload-panel\"\n      v-model=\"statusPanel.show\"\n      :menuProps=\"statusPanel.menuProps\"\n      :title=\"statusPanelTitle\"\n      :showClose=\"itemStatuses.pending === 0\"\n      bottom\n      right\n    >\n      <m-action-status-panel-item\n        v-for=\"(item, index) in uploadQueue\"\n        :key=\"item.file.name + index\"\n        :status=\"item.status\"\n        :icon=\"item.icon\"\n        :iconColor=\"item.iconColor\"\n        :title=\"item.file.name\"\n        :subtitle=\"item.message || item.fileSize\"\n      />\n    </m-action-status-panel>\n\n    <m-snackbar v-model=\"showSnackbar\">\n      <img :src=\"infoIcon\" width=\"24\" />\n      {{ $t('files.add.dragAndDropFilesToUpload') }}\n    </m-snackbar>\n  </v-container>\n</template>\n<script>\nimport { DateTime } from 'luxon'\nimport { filter } from '../../utilities/search'\nimport {\n  MActionStatusPanel,\n  MActionStatusPanelItem,\n  MBulkSelectPanel,\n  MButton,\n  MCheckbox,\n  MContextMenu,\n  MContextMenuItem,\n  MFilter,\n  MPagination,\n  MSearchInput,\n  MSnackbar,\n  MTable,\n  MTableView,\n} from 'gatherings-storybook'\nimport InfoIcon from 'gatherings-storybook/src/icons/info-filled.svg'\nimport { countBy } from 'lodash'\nimport { formatFileSize, isValidMimeType } from '@/utilities/files'\n\nconst MAX_UPLOAD_SIZE_IN_MB = parseInt(process.env.VUE_APP_MAX_UPLOAD_SIZE_IN_MB) || 50\n\nexport default {\n  props: ['ecosystemId'],\n  components: {\n    MActionStatusPanel,\n    MActionStatusPanelItem,\n    MBulkSelectPanel,\n    MButton,\n    MCheckbox,\n    MContextMenu,\n    MContextMenuItem,\n    MFilter,\n    MPagination,\n    MSearchInput,\n    MSnackbar,\n    MTable,\n    MTableView,\n  },\n  data() {\n    return {\n      ecosystem: {},\n      files: [],\n      windowWidth: window.innerWidth,\n      loading: false,\n      selectedFile: undefined,\n      searchTerm: null,\n      selectedFiles: [],\n      displayedFiles: [],\n      headers: [\n        {\n          value: 'name',\n          text: this.$t('files.list.table.filename'),\n        },\n        {\n          value: 'owner',\n          text: this.$t('files.list.table.uploadedBy'),\n          sort: (a, b) => {\n            const aName = `${a?.givenName} ${a?.surname}`\n            const bName = `${b?.givenName} ${b?.surname}`\n            if (aName === bName) return 0\n            return aName > bName ? 1 : -1\n          },\n        },\n        {\n          value: 'contentType',\n          text: this.$t('files.list.table.contentType'),\n        },\n        {\n          value: 'created',\n          text: this.$t('files.list.table.created'),\n        },\n        {\n          value: 'menu',\n          sortable: false,\n          width: '56px',\n          align: 'center',\n        },\n      ],\n      contextMenuProps: {\n        left: true,\n        'nudge-left': '12px',\n      },\n      sortBy: 'created',\n      sortDesc: true,\n      pageNumber: 1,\n      perPage: 10,\n      allowedFileTypes: ['application/pdf', 'image/*', 'video/*'],\n      uploadQueue: [],\n      statusPanel: {\n        show: false,\n        menuProps: {\n          attach: '#routerViewport',\n          right: true,\n          bottom: true,\n        },\n      },\n      showSnackbar: false,\n      filterSearchTerm: '',\n      filters: {\n        fileTypes: ['PDF', 'Video'],\n        uploadedBy: [],\n      },\n      appliedFilters: {\n        fileTypes: ['PDF', 'Video'],\n        uploadedBy: [],\n      },\n      people: [],\n      fileTypes: ['PDF', 'Video', 'Image'],\n      previewModal: {\n        show: false,\n        title: null,\n        subtitle: null,\n        width: '100%',\n        maxWidth: '90%',\n        height: '90vh',\n        file: null,\n        message: null,\n      },\n      editModal: {\n        show: false,\n      },\n      deleteModal: {\n        show: false,\n        title: this.$t('files.list.deleteThisFile'),\n        message: this.$t('files.list.areYouSureYouWantToDeleteThisFile'),\n        subMessage: this.$t('files.list.thisCannotBeUndone'),\n        width: this.$vuetify.breakpoint.smAndUp ? 'auto' : undefined,\n        items: [],\n      },\n      edit: {\n        fileName: null,\n      },\n    }\n  },\n  watch: {\n    uploadQueue(files) {\n      const filesToUpload = files.filter(file => file.status === 'pending')\n\n      if (filesToUpload.length > 0) {\n        this.uploadFiles(filesToUpload.map(item => item.file))\n      }\n    },\n    'statusPanel.show'(value) {\n      if (!value) {\n        this.uploadQueue = []\n      }\n    },\n    'edit.fileName': function (newValue) {\n      if (newValue !== this.selectedFile.name) {\n        this.editModal.submitDisabled = false\n      }\n    },\n  },\n  computed: {\n    currentEcosystemName() {\n      var currentEcosystem = { name: 'Error: Missing Ecosystem' }\n      var ecosystems = this.$store.getters['ecosystems/myEcosystems']\n      for (var ecosystem of ecosystems) {\n        if (ecosystem.id === this.ecosystemId) {\n          currentEcosystem = ecosystem\n          break\n        }\n      }\n      return currentEcosystem.name\n    },\n    titleRowHeight() {\n      return this.$vuetify.breakpoint.width <= 540 ? '200px' : '120px'\n    },\n    numberOfPages() {\n      if (this.filteredFiles.length < this.perPage) {\n        return 1\n      }\n      let result = this.filteredFiles.length / this.perPage\n      let remainder = this.filteredFiles.length % this.perPage\n\n      return remainder === 0 ? result : (this.filteredFiles.length - remainder) / this.perPage + 1\n    },\n    filteredFiles() {\n      const filters = {\n        search: item => this.searchTable(item) ?? item,\n        uploadedBy: item => {\n          const { uploadedBy } = this.appliedFilters\n          return (\n            !uploadedBy.length ||\n            uploadedBy.includes(`${item.owner?.givenName} ${item.owner?.surname}`) ||\n            (!item.owner && uploadedBy.includes(this.$t('files.filter.nA')))\n          )\n        },\n        fileType: item => {\n          let type = this.formatContentType(item.contentType)\n          const { fileTypes } = this.appliedFilters\n          return !fileTypes.length || fileTypes.includes(type)\n        },\n      }\n      const tableFilter = filter(this.files, filters)\n      return tableFilter\n    },\n    filteredUploadedBy() {\n      let people = this.people\n      people = people.filter(person => {\n        if (person.toLowerCase().indexOf(this.filterSearchTerm.toLocaleLowerCase()) > -1) {\n          return person\n        }\n      })\n      return people\n    },\n    statusPanelTitle() {\n      const { pending, error, success } = this.itemStatuses\n\n      if (pending > 0) {\n        return this.$t('files.add.filesUploading', { count: pending })\n      }\n\n      if (error > 0) {\n        return this.$t('files.add.filesNotUploaded', { count: error })\n      }\n\n      if (success > 0) {\n        return this.$t('files.add.filesUploaded', { count: success })\n      }\n\n      return null\n    },\n    itemStatuses() {\n      return {\n        pending: 0,\n        success: 0,\n        error: 0,\n        ...countBy(this.uploadQueue, 'status'),\n      }\n    },\n    infoIcon() {\n      return InfoIcon\n    },\n    fileLoading() {\n      return this.$store.getters['files/fileLoading']\n    },\n    filesDownloading() {\n      return this.$store.getters['files/filesDownloading']\n    },\n    formButtons() {\n      return {\n        Submit: {\n          show: false,\n        },\n      }\n    },\n    selectedDisplayedFiles() {\n      return this.displayedFiles.filter(df => this.selectedFiles.find(sf => sf.id === df.id))\n    },\n    allDisplayedSelected() {\n      return this.selectedDisplayedFiles.length === this.displayedFiles.length\n    },\n  },\n  async mounted() {\n    window.addEventListener('resize', () => (this.windowWidth = window.innerWidth))\n    document.addEventListener('dragenter', () => (this.showSnackbar = true))\n\n    // Get files\n    this.loading = true\n    await this.fetchFiles()\n    this.loading = false\n  },\n  methods: {\n    async fetchFiles() {\n      await this.$store.dispatch('files/fetchForEcosystem', this.ecosystemId)\n      this.files = this.$store.getters['files/getForEcosystem'](this.ecosystemId)\n      this.people = this.$store.getters['files/getForEcosystemUploadedBy'](this.ecosystemId)\n    },\n    async updateFile(value) {\n      await this.$store\n        .dispatch('files/update', {\n          ecosystemId: this.ecosystemId,\n          file: this.selectedFile,\n          payload: value,\n        })\n        .then(this.fetchFiles)\n    },\n    downloadFile(file) {\n      this.$store.dispatch('files/downloadFile', { file, ecosystemId: this.ecosystemId })\n    },\n    confirmDelete(files) {\n      this.deleteModal.title =\n        files.length > 1\n          ? this.$t('files.list.deleteNFiles', { n: files.length })\n          : this.$t('files.list.deleteThisFile')\n\n      this.deleteModal.message =\n        files.length > 1\n          ? this.$t('files.list.areYouSureYouWantToDeleteTheseFiles')\n          : this.$t('files.list.areYouSureYouWantToDeleteThisFile')\n\n      this.deleteModal.items = files\n      this.deleteModal.show = true\n    },\n    async deleteFiles(files) {\n      this.$store.dispatch('ui/toggleLoading', { loading: true })\n      try {\n        // Following code is to allow for easy demonstration to non technical team members how this would look if the delete failed\n        // await new Promise(resolve => setTimeout(resolve, 4000))\n        // throw new Error('Sorry, something has gone wrong and your file was not deleted')\n\n        await this.$store.dispatch('files/remove', {\n          ecosystemId: this.ecosystemId,\n          files: files,\n        })\n      } catch (error) {\n        let message = (error.response && error.response.data) || error.message || error.toString()\n        this.deleteModal.show = false\n        this.$store.dispatch('ui/toggleLoading', { loading: false })\n        this.$store.dispatch('ui/launchSnackbar', {\n          color: 'red',\n          message,\n          subMessage: this.$t('files.list.fileDeletionNotCompleted'),\n          buttonColor: 'white',\n          icon: 'mdi-alert-octagon',\n        })\n        return\n      }\n\n      this.$store.dispatch('ui/toggleLoading', { loading: false })\n      this.files = this.$store.getters['files/getForEcosystem'](this.ecosystemId)\n      this.$store.dispatch('ui/launchSnackbar', {\n        color: 'green',\n        message: this.$t('files.list.fileDeletionSuccessful', {\n          n: this.deleteModal.items.length,\n          item: this.deleteModal.items.length > 1 ? 'files' : 'file',\n        }),\n        buttonColor: 'white',\n        icon: 'mdi-checkbox-marked-circle',\n      })\n      this.deleteModal.items = null\n      this.deleteModal.show = false\n      this.selectedFiles = this.selectedFiles.filter(sf => !files.find(file => file.id === sf.id))\n    },\n    openEditFileModal(file) {\n      this.editModal.show = true\n      this.selectedFile = file\n    },\n    searchTable(item) {\n      if (!this.searchTerm) {\n        return undefined\n      } else {\n        return (\n          `${item.owner?.givenName} ${item.owner?.surname}`\n            .toLocaleLowerCase()\n            .includes(this.searchTerm.toLocaleLowerCase()) ||\n          item.name.toLocaleLowerCase().includes(this.searchTerm.toLocaleLowerCase())\n        )\n      }\n    },\n    formatDate(date) {\n      if (!date) return null\n      return DateTime.fromISO(date).toFormat('EEE DD, H:mm (ZZZZ)')\n    },\n    formatContentType(type) {\n      if (!type) return this.$t('files.filter.nA')\n\n      if (type === 'application/pdf') {\n        return this.$t('files.list.contentType.pdf')\n      }\n\n      if (type.includes('image/')) {\n        return this.$t('files.list.contentType.image')\n      }\n\n      if (type.includes('video/')) {\n        return this.$t('files.list.contentType.video')\n      }\n\n      return type\n    },\n    changeSize(size) {\n      this.perPage = size\n\n      if (size >= this.filteredFiles.length) {\n        this.pageNumber = 1\n      }\n      if (this.pageNumber > this.numberOfPages) {\n        this.pageNumber = this.numberOfPages\n      }\n    },\n    /**\n     * Returns a relevant file icon for the file\n     * @param {File} file the file\n     */\n    getFileIcon(file) {\n      if (file.type === 'application/pdf') {\n        return { icon: 'file-pdf-solid', iconColor: '#FF5630' }\n      }\n\n      if (file.type.includes('image/')) {\n        return { icon: 'file-image-solid', iconColor: '#FFAB00' }\n      }\n\n      if (file.type.includes('video/')) {\n        return { icon: 'file-video-solid', iconColor: '#FF5630' }\n      }\n\n      return { icon: 'file-solid', iconColor: '#5E6C84' }\n    },\n    /**\n     * Validates a file returning an error message string if necessary\n     * @param {File} file The file\n     * @return {string} The error message or null if validation has passed\n     */\n    validateFile(file) {\n      if (!isValidMimeType(file.type, this.allowedFileTypes)) {\n        return this.$t('files.add.fileTypeValidationMsg')\n      }\n      if (file.size > MAX_UPLOAD_SIZE_IN_MB * 1024 * 1024) {\n        return this.$t('files.add.fileSizeValidationMsg')\n      }\n\n      return null\n    },\n    /**\n     * Adds a list of files to the upload queue\n     * @param {FileList} files The list of files\n     */\n    addFilesToQueue(files) {\n      for (let file of files) {\n        // Validate file\n        const message = this.validateFile(file)\n        const icon = this.getFileIcon(file)\n\n        // Add to the queue to show to the user\n        this.uploadQueue.push({\n          file,\n          message,\n          fileSize: formatFileSize(file.size),\n          status: message ? 'error' : 'pending',\n          ...icon,\n        })\n      }\n    },\n    /**\n     * Triggered when a user drops files on the table or when they upload a file to the file input\n     * @param {Event} event The event containing the files\n     */\n    onFileChange(event) {\n      // Pull files from input or from dropped event\n      const { files } = event.dataTransfer || event.target\n\n      this.addFilesToQueue(files)\n\n      // Show the status panel\n      this.statusPanel.show = true\n      this.showSnackbar = false\n\n      // Reset file input\n      if (!event.dataTransfer) {\n        this.$refs.upload.value = null\n      }\n    },\n    /**\n     * Uploads a list of files\n     * @param {Array<File>} files Array of file objects to upload\n     */\n    async uploadFiles(files) {\n      try {\n        const response = await this.$store.dispatch('files/upload', {\n          ecosystemId: this.ecosystemId,\n          files,\n        })\n\n        const { message, data } = response.data\n\n        if (message === 'Succeeded') {\n          this.updateFilesInQueue(data)\n          // Update files list\n          await this.fetchFiles()\n        } else {\n          throw new Error('Request completed but message returned unsuccessful')\n        }\n      } catch (e) {\n        // Mark files as unsuccessful\n        this.updatePendingFilesError()\n      }\n    },\n    /**\n     * Updates the queued files with the reponse statuses\n     * @param {Array} files Array of file statuses\n     */\n    updateFilesInQueue(files) {\n      const pendingFiles = this.uploadQueue.filter(file => file.status === 'pending')\n\n      files.forEach(({ name, succeeded, errorMessage }) => {\n        const index = pendingFiles.findIndex(item => item.file.name === name)\n\n        if (index > -1) {\n          const item = pendingFiles[index]\n\n          if (succeeded) {\n            item.status = 'success'\n          } else {\n            item.status = 'error'\n            item.message = errorMessage\n          }\n        }\n      })\n    },\n    /**\n     * Updates the queued files with a error message\n     */\n    updatePendingFilesError() {\n      const pendingFiles = this.uploadQueue.filter(file => file.status === 'pending')\n\n      pendingFiles.forEach(item => {\n        item.status = 'error'\n        item.message = this.$t('files.add.uploadFailed')\n      })\n    },\n    filterChange(filters) {\n      this.filterSearchTerm = ''\n      Object.assign(this.appliedFilters, filters)\n      Object.assign(this.filters, filters)\n    },\n    resetFilter() {\n      this.filterSearchTerm = ''\n      Object.assign(this.appliedFilters, { fileTypes: [], uploadedBy: [] })\n      Object.assign(this.filters, { fileTypes: [], uploadedBy: [] })\n    },\n    /**\n     * Previews a file\n     */\n    async preview(file) {\n      // Set the selected file for delete/edit/download\n      this.selectedFile = file\n\n      this.previewModal.message = null\n      this.previewModal.show = true\n      this.previewModal.title = file.owner\n        ? `${file.owner.givenName} ${file.owner.surname}`\n        : this.$t('files.filter.nA')\n      this.previewModal.subtitle = `${this.formatDate(file.created)} - ${file.name}`\n\n      // There is no content type, so we don't know the format to preview\n      if (!file.contentType) {\n        // Don't attempt to download the file just display the popup with a message\n        this.previewModal.message = this.$t('files.list.cantPreviewThisFile')\n        return\n      }\n\n      if (file.contentType?.includes('video/')) {\n        this.previewModal.file = {\n          video: file.assetUrl,\n          type: file.contentType,\n        }\n      } else {\n        const { data } = await this.$store.dispatch(`files/fetchFile`, {\n          file,\n          ecosystemId: this.ecosystemId,\n        })\n        // Create a file object for the preview to render\n        this.previewModal.file = new File([data], file.name, { type: data.type })\n      }\n    },\n    /**\n     * closes the file preview modal\n     */\n    closePreview() {\n      this.previewModal.show = false\n      this.previewModal.file = null\n    },\n    closeEditModal() {\n      this.editModal.show = false\n      this.editModal.submitDisabled = true\n    },\n    unselectAll() {\n      this.selectedFiles = []\n    },\n    setDisplayedFiles(files) {\n      this.displayedFiles = files\n    },\n    /**\n     * Shows the delete modal\n     */\n    showDelete(file) {\n      this.selectedFile = file\n      this.deleteModal.items.push(file)\n      this.deleteModal.show = true\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n.sub-title {\n  font-size: 1.3rem;\n}\n\n.file-name {\n  font-weight: 700;\n  line-height: 20px;\n  color: $black;\n}\n\n.files-list {\n  // TODO: Update vuetify breakpoints variable to use these breakpoint settings\n  @media (min-width: 960px) {\n    max-width: 840px;\n  }\n\n  @media (min-width: 1264px) {\n    max-width: 1120px;\n  }\n\n  @media (min-width: 1904px) {\n    max-width: 1240px;\n  }\n\n  &__table,\n  &__heading,\n  .button {\n    :deep(*) {\n      font-family: 'Kiro' !important;\n    }\n  }\n}\n\n.table-toolbar {\n  width: 100%;\n  display: flex;\n  align-items: flex-end;\n  gap: 12px;\n\n  :deep(*) {\n    font-family: 'Kiro' !important;\n  }\n}\n\n.table-search-bar {\n  flex: content;\n}\n\n.menu-content-container {\n  display: flex;\n  flex-wrap: wrap;\n\n  :deep(*) {\n    font-family: 'Kiro' !important;\n  }\n}\n\n.menu-title {\n  font-weight: 700;\n}\n\n.menu-content {\n  flex: content;\n  margin-right: 2rem;\n}\n\n.menu-content-search {\n  width: 298px;\n}\n\n.search {\n  margin-bottom: 0.5rem;\n}\n\n.no-results-found {\n  display: flex;\n  justify-content: center;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.25rem;\n\n  .v-input--selection-controls {\n    margin-top: 0;\n    padding-top: 0;\n\n    :deep(.v-input__slot) {\n      margin-bottom: 0;\n\n      .v-label {\n        font-weight: 400;\n        font-size: 1rem;\n        line-height: 1.5rem;\n        color: $black;\n      }\n    }\n  }\n}\n\n.list-items-uploaded-by {\n  max-height: 258px;\n  padding: 0.75rem 0.875rem;\n  border: 1px solid $grey-border;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  overflow-y: scroll;\n}\n\n.list-items-file-type {\n  margin-top: 0.5rem;\n}\n\n.edit-modal-content {\n  margin-top: 12px;\n\n  :deep(*) {\n    font-family: 'Kiro' !important;\n    font-size: 1rem;\n  }\n\n  :deep(.value) {\n    font-size: 1.1429rem;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n.snackbar *,\n.action-status-panel * {\n  font-family: 'Kiro' !important;\n}\n\n.context-menu.list {\n  border: none;\n\n  .list-item__content {\n    font-family: 'Kiro';\n  }\n}\n\n.v-application {\n  .v-menu__content {\n    .menu > .menu__footer > button > span {\n      font-family: 'Kiro' !important;\n    }\n  }\n\n  .v-dialog__content {\n    .v-dialog > .modal {\n      * {\n        font-family: 'Kiro' !important;\n      }\n\n      .modal__top-container {\n        .modal__header {\n          font-weight: 400;\n          font-size: 1.4286rem;\n          line-height: 32px;\n        }\n      }\n    }\n  }\n}\n\n// Retained for future use - TODO fix indeterminate icon color when selecting all\n// #select-all-files-checkbox .v-icon {\n//   color: $primary !important;\n// }\n</style>\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/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./List.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/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./List.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./List.vue?vue&type=template&id=403d5d3a&scoped=true&\"\nimport script from \"./List.vue?vue&type=script&lang=js&\"\nexport * from \"./List.vue?vue&type=script&lang=js&\"\nimport style0 from \"./List.vue?vue&type=style&index=0&id=403d5d3a&prod&scoped=true&lang=scss&\"\nimport style1 from \"./List.vue?vue&type=style&index=1&id=403d5d3a&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"403d5d3a\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../../node_modules/@vue/cli-service/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/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./List.vue?vue&type=style&index=1&id=403d5d3a&prod&lang=scss&\""],"sourceRoot":""}