{"version":3,"file":"Fileuploader.cjs","sources":["../../common/Fileuploader/Fileuploader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, VNode } from \"vue\";\n\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { FileUploaderClassesKey, FileUploaderProps } from \"./types\";\n\nconst {\n  variant = \"dragger\",\n  title = \"Click to upload or drag and drop\",\n  description = \"SVG, PNG, JPG or GIF (MAX. 800x400px)\",\n  fileSizeText = \"\",\n  acceptedFile = [\".pdf\", \"jpg\"],\n  id = \"\",\n  multiple = false,\n  showButton = false,\n  btnLabel = \"Browse Files\",\n  disabled = false,\n  btnIconName = \"search-solid-icon\",\n  uploadIconName = \"cloud-upload-icon\",\n  showButtonIcon = false,\n  docIconName = \"document-text-icon\",\n  error = false,\n  success = false,\n  clearBtnLabel = \"Clear\",\n  helperText = \"\",\n  classes = {} as Partial<Record<FileUploaderClassesKey, string>>,\n} = defineProps<FileUploaderProps>();\n\nconst fileName = ref(\"\");\n\ndefineSlots<{\n  buttonTitle(): VNode;\n  buttonFileName(): VNode;\n  uploadedFileBody(): VNode;\n  uploadBody(): VNode;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"onFileupload\", files: FileList | File | undefined | null): void;\n  (e: \"onClear\"): void;\n}>();\n\nconst onDragOver = (event: DragEvent) => {\n  event.preventDefault();\n};\n\nfunction uploadFile(event: Event) {\n  const files = (event?.target as HTMLInputElement)?.files;\n  fileName.value = multiple && files && files?.length > 1 ? `No of files uploaded ${files?.length}` : (files && files?.[0]?.name) || \"\";\n  emits(\"onFileupload\", files);\n}\n\nfunction dropUploadFile(file: FileList | undefined) {\n  fileName.value = multiple && file && file?.length > 1 ? `No of files uploaded ${file.length}` : (file && file?.[0]?.name) || \"\";\n  emits(\"onFileupload\", file);\n}\n\nfunction onFileDrop(event: DragEvent) {\n  event.preventDefault();\n  const file = event?.dataTransfer?.files;\n  dropUploadFile(file);\n}\n\nfunction onClear() {\n  fileName.value = \"\";\n  emits(\"onClear\");\n}\n</script>\n\n<template>\n  <div>\n    <div v-if=\"variant === 'button'\" class=\"upload-button-container\">\n      <Button\n        component=\"label\"\n        :for=\"id\"\n        :classes=\"{\n          container: disabled ? '!cursor-not-allowed !bg-app-gray-200 upload-button' : 'upload-button !bg-app-gray-800 dark:!bg-app-gray-600',\n        }\"\n      >\n        <input\n          :id=\"id\"\n          ref=\"fileInput\"\n          aria-labelledby=\"upload\"\n          type=\"file\"\n          class=\"hidden\"\n          :disabled=\"disabled\"\n          :accept=\"acceptedFile.join(' ,')\"\n          :multiple=\"multiple\"\n          @change=\"uploadFile\"\n        />\n        <Icon v-if=\"showButtonIcon && !$slots?.buttonTitle\" :class=\"['mr-1 w-5', classes?.ctaBtnIcon || '']\" :name=\"btnIconName\" size=\"20\" />\n        <span v-if=\"!$slots?.buttonTitle\">{{ btnLabel }}</span>\n        <span v-if=\"$slots?.buttonTitle\">\n          <slot name=\"buttonTitle\" />\n        </span>\n      </Button>\n      <div\n        class=\"border-app-gray-300 bg-app-gray-50 text-app-gray-900 dark:border-app-gray-600 dark:bg-app-gray-700 dark:text-app-white flex h-full flex-1 items-center justify-between rounded-r-lg border px-4 py-3 text-sm font-normal\"\n        data-testid=\"file-box\"\n      >\n        <span v-if=\"!$slots?.buttonFileName\" :class=\"[classes?.fileName]\">{{ fileName || \"No file chosen\" }}</span>\n        <span v-if=\"$slots?.buttonFileName\">\n          <slot name=\"buttonFileName\" />\n        </span>\n        <Button v-if=\"fileName\" variant=\"text\" :class=\"[classes?.clearBtn]\" @on-click=\"onClear\">\n          {{ clearBtnLabel }}\n        </Button>\n      </div>\n    </div>\n    <div v-if=\"variant === 'dragger'\">\n      <label\n        v-if=\"!fileName\"\n        :for=\"id\"\n        :class=\"['upload-box-container', { '!cursor-not-allowed': disabled }, classes?.container]\"\n        @dragover=\"onDragOver\"\n        @drop=\"onFileDrop\"\n      >\n        <span v-if=\"!$slots?.uploadBody\" :class=\"['flex flex-col items-center justify-center']\">\n          <Icon :name=\"uploadIconName\" :class=\"['!text-app-gray-400', 'dark:!text-app-gray-500', classes?.uploadIcon || '']\" />\n          <p :class=\"['text-app-gray-500 dark:text-app-gray-400 mt-3 text-sm font-normal', classes?.title]\">{{ title }}</p>\n          <p :class=\"['text-app-gray-500 dark:text-app-gray-400 mt-1 text-xs font-normal', classes?.description]\">{{ description }}</p>\n          <p v-if=\"fileSizeText\" :class=\"['text-app-gray-500 dark:text-app-gray-400 mt-1 text-xs font-semibold', classes?.fileSizeText]\">\n            {{ fileSizeText }}\n          </p>\n          <Button\n            v-if=\"showButton\"\n            component=\"label\"\n            size=\"xs\"\n            :class=\"[\n              'mt-4 flex cursor-pointer !items-center !justify-between',\n              { '!bg-app-gray-200 !cursor-not-allowed !border-0': disabled },\n              classes?.ctaBtn,\n            ]\"\n            :for=\"id\"\n            :disabled=\"disabled\"\n          >\n            <span v-if=\"!$slots?.buttonTitle\" :class=\"['flex items-center justify-between']\">\n              <Icon v-if=\"showButtonIcon\" :class=\"['mr-1 w-4', classes?.ctaBtnIcon || '']\" :name=\"btnIconName\" size=\"16\" />\n              {{ btnLabel }}\n            </span>\n            <span v-if=\"$slots?.buttonTitle\">\n              <slot name=\"buttonTitle\" />\n            </span>\n          </Button>\n        </span>\n        <span v-if=\"$slots?.uploadBody\">\n          <slot name=\"uploadBody\" />\n        </span>\n        <input\n          :id=\"id\"\n          ref=\"fileInput\"\n          type=\"file\"\n          class=\"hidden\"\n          :multiple=\"multiple\"\n          :accept=\"acceptedFile.join(' ,')\"\n          :disabled=\"disabled\"\n          @change=\"uploadFile\"\n        />\n      </label>\n      <div\n        v-if=\"fileName\"\n        :class=\"[\n          'upload-box-container !border-solid',\n          { 'upload-box-success-container': success, 'upload-box-error-container': error },\n          classes?.uploadedContainer,\n        ]\"\n      >\n        <span v-if=\"!$slots?.uploadedFileBody\" class=\"flex flex-col items-center\">\n          <Icon :name=\"docIconName\" :class=\"['text-app-gray-500 dark:text-app-gray-400', classes?.docIcon || '']\" />\n          <p :class=\"['text-app-gray-500 dark:text-app-gray-400 mt-4 text-sm font-normal', classes?.fileName]\">{{ fileName }}</p>\n          <Button variant=\"text\" :class=\"['mt-4', classes?.clearBtn]\" @on-click=\"onClear\">{{ clearBtnLabel }}</Button>\n        </span>\n        <span v-if=\"$slots?.uploadedFileBody\" class=\"flex flex-col items-center\">\n          <slot name=\"uploadedFileBody\" />\n        </span>\n      </div>\n    </div>\n    <p\n      v-if=\"helperText\"\n      :class=\"['helperText mt-1 text-xs font-normal', { 'helperText-success': success, 'helperText-error': error }, classes?.helperText]\"\n    >\n      {{ helperText }}\n    </p>\n  </div>\n</template>\n\n<style scoped>\n@reference \"../../styles/main.css\";\n\n.upload-box-container {\n  @apply w-full flex flex-col items-center justify-center p-6 rounded-lg border border-dashed border-app-gray-200 bg-app-gray-50 cursor-pointer dark:bg-app-gray-700 dark:border-app-gray-600;\n}\n\n.upload-box-success-container {\n  @apply border-app-green-200! bg-app-green-50! dark:bg-app-green-700! dark:border-app-green-600!;\n}\n\n.upload-box-error-container {\n  @apply border-app-red-200! bg-app-red-50! dark:bg-app-red-700! dark:border-app-red-600!;\n}\n\n.upload-button-container {\n  @apply flex items-center w-full;\n  height: 41px;\n}\n\n.upload-button-text {\n  @apply flex items-center;\n  height: 41px;\n}\n\n.upload-button {\n  @apply flex items-center rounded-r-none active:border-0! cursor-pointer;\n}\n\n.helperText {\n  @apply text-app-gray-500 dark:text-app-gray-400;\n}\n\n.helperText-success {\n  @apply text-app-green-500! dark:text-app-green-400!;\n}\n\n.helperText-error {\n  @apply text-app-red-500! dark:text-app-red-400!;\n}\n</style>\n"],"names":["fileName","ref","emits","__emit","onDragOver","event","uploadFile","files","__props","dropUploadFile","file","onFileDrop","onClear","_createElementBlock","_openBlock","_hoisted_1","_createVNode","_unref","Button","_createElementVNode","$slots","_createBlock","Icon","_normalizeClass","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_9","_hoisted_10","_createTextVNode","_hoisted_11","_hoisted_12","_hoisted_14","_hoisted_15"],"mappings":"6qDA6BA,MAAMA,EAAWC,EAAAA,IAAI,EAAE,EASjBC,EAAQC,EAKRC,EAAcC,GAAqB,CACvCA,EAAM,eAAA,CACR,EAEA,SAASC,EAAWD,EAAc,CAChC,MAAME,EAASF,GAAO,QAA6B,MACnDL,EAAS,MAAQQ,EAAA,UAAYD,GAASA,GAAO,OAAS,EAAI,wBAAwBA,GAAO,MAAM,GAAMA,GAASA,IAAQ,CAAC,GAAG,MAAS,GACnIL,EAAM,eAAgBK,CAAK,CAC7B,CAEA,SAASE,EAAeC,EAA4B,CAClDV,EAAS,MAAQQ,EAAA,UAAYE,GAAQA,GAAM,OAAS,EAAI,wBAAwBA,EAAK,MAAM,GAAMA,GAAQA,IAAO,CAAC,GAAG,MAAS,GAC7HR,EAAM,eAAgBQ,CAAI,CAC5B,CAEA,SAASC,EAAWN,EAAkB,CACpCA,EAAM,eAAA,EACN,MAAMK,EAAOL,GAAO,cAAc,MAClCI,EAAeC,CAAI,CACrB,CAEA,SAASE,GAAU,CACjBZ,EAAS,MAAQ,GACjBE,EAAM,SAAS,CACjB,6BAIEW,qBAiHM,MAAA,KAAA,CAhHOL,EAAA,UAAO,UAAlBM,EAAAA,YAAAD,EAAAA,mBAqCM,MArCNE,EAqCM,CApCJC,cAuBSC,EAAAA,MAAAC,CAAA,EAAA,CAtBP,UAAU,QACT,IAAKV,EAAA,GACL,QAAO,WAAyBA,EAAA,SAAQ,qDAAA,sDAAA,sBAIzC,IAUE,CAVFW,EAAAA,mBAUE,QAAA,CATC,GAAIX,EAAA,GACL,IAAI,YACJ,kBAAgB,SAChB,KAAK,OACL,MAAM,SACL,SAAUA,EAAA,SACV,OAAQA,EAAA,aAAa,KAAI,IAAA,EACzB,SAAUA,EAAA,SACV,SAAQF,CAAA,aAECE,EAAA,gBAAc,CAAKY,EAAAA,QAAQ,2BAAvCC,EAAAA,YAAqIJ,QAAAK,EAAAA,SAAA,EAAA,OAAhF,MAAKC,EAAAA,eAAA,CAAA,WAAef,EAAA,SAAS,YAAU,EAAA,CAAA,EAAU,KAAMA,EAAA,YAAa,KAAK,IAAA,wDACjHY,EAAAA,QAAQ,yCAArBN,EAAAA,UAAA,EAAAD,EAAAA,mBAAuD,2BAAlBL,EAAA,QAAQ,EAAA,CAAA,GACjCY,EAAAA,QAAQ,2BAApBP,EAAAA,mBAEO,OAAAW,EAAA,CADLC,EAAAA,WAA2BC,EAAA,OAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,4DAG/BP,EAAAA,mBAWM,MAXNQ,EAWM,CAPSP,EAAAA,QAAQ,0DAArBP,EAAAA,mBAA2G,OAAA,OAArE,MAAKU,EAAAA,eAAA,CAAGf,EAAA,SAAS,QAAQ,CAAA,CAAA,oBAAMR,EAAA,OAAQ,gBAAA,EAAA,CAAA,GACjEoB,EAAAA,QAAQ,8BAApBP,EAAAA,mBAEO,OAAAe,EAAA,CADLH,EAAAA,WAA8BC,EAAA,OAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gCAElB1B,EAAA,qBAAdqB,EAAAA,YAESJ,EAAAA,MAAAC,CAAA,EAAA,OAFe,QAAQ,OAAQ,MAAKK,EAAAA,eAAA,CAAGf,EAAA,SAAS,QAAQ,CAAA,EAAI,UAAUI,CAAA,qBAC7E,IAAmB,qCAAhBJ,EAAA,aAAa,EAAA,CAAA,CAAA,mFAIXA,EAAA,UAAO,yBAAlBK,EAAAA,mBAmEM,MAAAgB,EAAA,CAjEK7B,EAAA,iDADTa,EAAAA,mBAgDQ,QAAA,OA9CL,IAAKL,EAAA,GACL,MAAKe,EAAAA,eAAA,CAAA,uBAAA,CAAA,sBAAoDf,EAAA,UAAYA,EAAA,SAAS,SAAS,CAAA,EACvF,WAAUJ,EACV,OAAMO,CAAA,GAEMS,EAAAA,QAAQ,wCAArBN,EAAAA,YAAAD,EAAAA,mBA2BO,OA3BPiB,EA2BO,CA1BLd,cAAqHC,EAAAA,MAAAK,EAAAA,SAAA,EAAA,CAA9G,KAAMd,EAAA,eAAiB,MAAKe,EAAAA,eAAA,CAAA,qBAAA,0BAAoDf,EAAA,SAAS,YAAU,EAAA,CAAA,CAAA,2BAC1GW,EAAAA,mBAAiH,IAAA,CAA7G,MAAKI,EAAAA,eAAA,CAAA,oEAAwEf,EAAA,SAAS,KAAK,CAAA,CAAA,oBAAMA,EAAA,KAAK,EAAA,CAAA,EAC1GW,EAAAA,mBAA6H,IAAA,CAAzH,MAAKI,EAAAA,eAAA,CAAA,oEAAwEf,EAAA,SAAS,WAAW,CAAA,CAAA,oBAAMA,EAAA,WAAW,EAAA,CAAA,EAC7GA,EAAA,4BAATK,EAAAA,mBAEI,IAAA,OAFoB,MAAKU,EAAAA,eAAA,CAAA,sEAA0Ef,EAAA,SAAS,YAAY,CAAA,CAAA,oBACvHA,EAAA,YAAY,EAAA,CAAA,+BAGTA,EAAA,0BADRa,EAAAA,YAmBSJ,EAAAA,MAAAC,CAAA,EAAA,OAjBP,UAAU,QACV,KAAK,KACJ,MAAKK,EAAAA,eAAA,6GAA+If,EAAA,QAAA,EAA0BA,EAAA,SAAS,MAAA,GAKvL,IAAKA,EAAA,GACL,SAAUA,EAAA,QAAA,qBAEX,IAGO,CAHMY,EAAAA,QAAQ,yCAArBN,EAAAA,YAAAD,EAAAA,mBAGO,OAHPkB,EAGO,CAFOvB,EAAA,8BAAZa,EAAAA,YAA6GJ,EAAAA,MAAAK,EAAAA,SAAA,EAAA,OAAhF,MAAKC,EAAAA,eAAA,CAAA,WAAef,EAAA,SAAS,YAAU,EAAA,CAAA,EAAU,KAAMA,EAAA,YAAa,KAAK,IAAA,wDAAOwB,EAAAA,gBAAA,sBAC1GxB,EAAA,QAAQ,EAAA,CAAA,CAAA,IAEDY,EAAAA,QAAQ,2BAApBP,EAAAA,mBAEO,OAAAoB,EAAA,CADLR,EAAAA,WAA2BC,EAAA,OAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qGAIrBN,EAAAA,QAAQ,0BAApBP,EAAAA,mBAEO,OAAAqB,EAAA,CADLT,EAAAA,WAA0BC,EAAA,OAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gCAE5BP,EAAAA,mBASE,QAAA,CARC,GAAIX,EAAA,GACL,IAAI,YACJ,KAAK,OACL,MAAM,SACL,SAAUA,EAAA,SACV,OAAQA,EAAA,aAAa,KAAI,IAAA,EACzB,SAAUA,EAAA,SACV,SAAQF,CAAA,qBAILN,EAAA,qBADRa,EAAAA,mBAgBM,MAAA,OAdH,MAAKU,EAAAA,eAAA,sCAAgG,CAAA,+BAAAf,EAAA,qCAAuCA,EAAA,KAAA,EAAmBA,EAAA,SAAS,iBAAA,KAM5JY,EAAAA,QAAQ,8CAArBN,EAAAA,YAAAD,EAAAA,mBAIO,OAJPsB,EAIO,CAHLnB,cAA0GC,EAAAA,MAAAK,EAAAA,SAAA,EAAA,CAAnG,KAAMd,EAAA,YAAc,MAAKe,EAAAA,eAAA,CAAA,2CAA+Cf,EAAA,SAAS,SAAO,EAAA,CAAA,CAAA,2BAC/FW,EAAAA,mBAAuH,IAAA,CAAnH,MAAKI,EAAAA,eAAA,CAAA,oEAAwEf,EAAA,SAAS,QAAQ,CAAA,CAAA,oBAAMR,EAAA,KAAQ,EAAA,CAAA,EAChHgB,cAA4GC,EAAAA,MAAAC,CAAA,EAAA,CAApG,QAAQ,OAAQ,MAAKK,EAAAA,eAAA,CAAA,OAAWf,EAAA,SAAS,QAAQ,CAAA,EAAI,UAAUI,CAAA,qBAAS,IAAmB,qCAAhBJ,EAAA,aAAa,EAAA,CAAA,CAAA,wBAEtFY,EAAAA,QAAQ,kBAApBN,EAAAA,YAAAD,EAAAA,mBAEO,OAFPuB,EAEO,CADLX,EAAAA,WAAgCC,EAAA,OAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gGAK9BlB,EAAA,0BADRK,EAAAA,mBAKI,IAAA,OAHD,oFAAuEL,EAAA,QAAO,mBAAsBA,SAASA,EAAA,SAAS,UAAU,CAAA,CAAA,oBAE9HA,EAAA,UAAU,EAAA,CAAA"}