{"version":3,"file":"B4Pu06yA.js","sources":["../../../../src/complib/formFields/inputFile/inputFile.vue","../../../../src/complib/formFields/inputFile/components/fileInput.vue","../../../../src/complib/formFields/inputFile/useFileInput.ts"],"sourcesContent":["<template>\n  <div>\n    <FormLabel\n      v-if=\"!$slots.label && label\"\n      :label=\"label\"\n      :required=\"required\"\n    />\n    <div\n      :class=\"[\n        {\n          'bg-primary-lightest !border-primary-base': draggingOver === 1,\n          'bg-status-danger-base-opc10 border-status-danger-base':\n            draggingOver === 2,\n        },\n        classes,\n      ]\"\n      class=\"relative flex flex-col-reverse border-dashed p-sm border-1 border-border-light rounded-alt-sm mt-[5px] gap-[10px]\"\n      @dragover=\"dragover\"\n      @dragleave=\"dragleave\"\n      @drop=\"drop\"\n    >\n      <template v-if=\"isMobile\">\n        <Popup\n          v-if=\"info || $slots.info\"\n          trigger-class=\"top-[10px] right-[15px] z-[5]\"\n        >\n          <template #trigger>\n            <Icon\n              icon-class=\"fad fa-circle-info\"\n              style=\"\n                --fa-primary-color: var(--thm-text-base);\n                --fa-secondary-color: var(--thm-status-warn-base);\n                --fa-secondary-opacity: 1;\n              \"\n              @dragover=\"preventDragOver\"\n            />\n          </template>\n          <template #content>\n            <template v-if=\"info\">\n              {{ t(info) }}\n            </template>\n            <template v-else-if=\"$slots.info\">\n              <slot name=\"info\" />\n            </template>\n          </template>\n        </Popup>\n      </template>\n      <template v-else>\n        <DynamicPopup\n          v-if=\"info || $slots.info\"\n          wrapper-classes=\"top-[10px] right-[15px] z-[5]  absolute !h-[32px] !w-[16px] flex justify-center items-center cursor-pointer mt-[-8px]\"\n        >\n          <template #trigger>\n            <Icon\n              icon-class=\"fad fa-circle-info\"\n              style=\"\n                --fa-primary-color: var(--thm-text-base);\n                --fa-secondary-color: var(--thm-status-warn-base);\n                --fa-secondary-opacity: 1;\n              \"\n              @dragover=\"preventDragOver\"\n            />\n          </template>\n          <template #content>\n            <InfoFrame :has-cancel=\"true\" class=\"min-w-[315px] max-w-[450px]\"\n              ><slot name=\"content\" /><template v-if=\"info\">\n                {{ t(info) }}\n              </template>\n              <template v-else-if=\"$slots.info\">\n                <slot name=\"info\" />\n              </template>\n            </InfoFrame>\n          </template>\n        </DynamicPopup>\n      </template>\n      <div\n        v-for=\"(inputName, i) in inputs\"\n        v-show=\"!deletedInputs.includes(inputName)\"\n        :key=\"i\"\n        class=\"item\"\n        @dragover=\"\n          (e) => {\n            if (i !== inputs.length - 1) return preventDragOver(e);\n          }\n        \"\n      >\n        <div>\n          <div v-if=\"i === inputs.length - 1\" class=\"p-sm\">\n            <div\n              v-if=\"draggingOver === 2\"\n              class=\"flex items-center justify-center text-status-danger-base gap-[8px]\"\n            >\n              <Icon icon-class=\"fal fa-ban\" classes=\"text-status-danger-base\" />\n              {{ t('formFields.inputFile.fileTypeNotAllowed') }}\n            </div>\n            <div v-else>\n              <div class=\"text-center touch:hidden\">\n                {{ t('formFields.inputFile.dropHereOr') }}\n                <span class=\"font-bold text-primary-base\">{{\n                  t('formFields.inputFile.selectFromComputer')\n                }}</span>\n              </div>\n              <div\n                class=\"items-center justify-center hidden font-bold touch:flex text-primary-base\"\n              >\n                {{ t('formFields.inputFile.selectFiles') }}\n              </div>\n            </div>\n          </div>\n          <div\n            v-if=\"!deletedInputs.includes(inputName)\"\n            class=\"flex justify-between gap-xs\"\n          >\n            <FileInput\n              :name=\"inputName\"\n              :accepted-formats=\"acceptedFormats.join(',')\"\n              :disabled=\"i !== inputs.length - 1\"\n              class=\"max-w-[calc(100%-30px)]\"\n              @change=\"\n                () => {\n                  if (i === inputs.length - 1) {\n                    inputs.push(getInputName());\n                    $emit('change');\n                  }\n                }\n              \"\n            />\n            <div\n              v-if=\"i !== inputs.length - 1\"\n              class=\"h-[24px] w-[25px] rounded-full flex justify-center items-center cursor-pointer\"\n              @click=\"\n                () => {\n                  deletedInputs.push(inputName);\n                  $emit('change');\n                }\n              \"\n            >\n              <Icon icon-class=\"fal fa-trash\" classes=\"text-primary-base\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-sm text-border-dark mt-[10px]\">\n      <slot name=\"acceptedFormats\">\n        {{ t('formFields.inputFile.acceptedFormats') }}\n      </slot>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport Popup from '~~/src/components/formFields/components/formInfoPopup.vue';\nimport {\n  Icon,\n  useFileInput,\n  FileInput,\n  FormLabel,\n  DynamicPopup,\n  InfoFrame,\n} from '@/complib';\nimport { SSR_safe_mq_breakpointIsMobile } from '~/injectionSymbols';\n\nconst props = defineProps({\n  label: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  id: {\n    type: String,\n    required: false,\n    default: undefined,\n  },\n  required: {\n    type: Boolean,\n    default: true,\n  },\n  name: {\n    type: String,\n    default: '',\n  },\n  info: {\n    type: String,\n    default: '',\n  },\n  acceptedFormats: {\n    type: Array as PropType<string[]>,\n    default: () => null,\n  },\n  classes: {\n    type: String,\n    default: '',\n  },\n});\n\ndefineEmits<{\n  (e: 'change'): void;\n}>();\n\nconst isMobile = inject(SSR_safe_mq_breakpointIsMobile);\n\nconst {\n  inputs,\n  deletedInputs,\n  draggingOver,\n  dragover,\n  dragleave,\n  drop,\n  preventDragOver,\n  getInputName,\n  acceptedFormats,\n  t,\n} = useFileInput(props);\n</script>\n<style lang=\"postcss\" scoped>\n.item:not(:last-child) {\n  @apply bg-background-base rounded-alt-sm p-[6px];\n  z-index: 5;\n  :deep(input) {\n    @apply appearance-none outline-0 ring-0 h-0;\n  }\n}\n\n.item:last-child {\n  :deep(input) {\n    @apply appearance-none outline-0 ring-0;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    cursor: pointer;\n    z-index: 2;\n    color: transparent;\n  }\n}\n\n:deep(.input) {\n  @apply appearance-none outline-0 ring-0 absolute;\n  color: transparent;\n}\n\n:deep(.input::file-selector-button) {\n  @apply appearance-none;\n  font-size: 0;\n  padding: 0;\n  border: 0;\n}\n</style>\n","<template>\n  <div>\n    <input\n      ref=\"input\"\n      class=\"input noGlobal\"\n      type=\"file\"\n      :name=\"name\"\n      :accept=\"acceptedFormats\"\n      :disabled=\"disabled\"\n      @change=\"\n        (e) => {\n          value = (e.target as HTMLInputElement).files[0];\n          $emit('change');\n        }\n      \"\n    />\n    <div v-if=\"value\">\n      <FileDisplay\n        :type=\"value.type\"\n        :name=\"value.name\"\n        :size=\"value.size\"\n        @click=\"openFileInNewTab\"\n      />\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { FileDisplay } from '@/complib';\n\ndefineProps({\n  acceptedFormats: {\n    type: String,\n    required: true,\n  },\n  disabled: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  name: {\n    type: String,\n    required: false,\n    default: '',\n  },\n});\n\ndefineEmits<{\n  (e: 'change'): void;\n}>();\n\nconst value = ref<File>(null);\nconst input = ref<HTMLInputElement>(null);\n\nfunction openFileInNewTab() {\n  if (input.value) {\n    const file = input.value.files[0];\n    const url = URL.createObjectURL(file);\n    window.open(url);\n    URL.revokeObjectURL(url);\n  }\n}\n</script>\n","export function useFileInput(props: {\n  name?: string;\n  id?: string;\n  acceptedFormats?: string[];\n}) {\n  const acceptedFormats = props.acceptedFormats ?? [\n    'application/pdf',\n    'image/png',\n    'image/jpeg',\n  ];\n\n  const draggingOver = ref(0);\n  let counter = 1;\n  const inputs = ref([getInputName()]);\n  const deletedInputs = ref([]);\n  function getInputName() {\n    counter++;\n    return `${props.name ?? props.id ?? 'file'}-${counter}`;\n  }\n\n  const { t } = useTrans();\n\n  function preventDragOver(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.dataTransfer.dropEffect = 'none';\n    return false;\n  }\n\n  function dragover(e: DragEvent) {\n    if ((e.target as HTMLElement).tagName === 'INPUT')\n      draggingOver.value = acceptedFormats.includes(\n        e.dataTransfer.items[0].type,\n      )\n        ? 1\n        : 2;\n    if (draggingOver.value === 2) preventDragOver(e);\n  }\n\n  function dragleave(e: DragEvent) {\n    if ((e.target as HTMLElement).tagName === 'INPUT') draggingOver.value = 0;\n  }\n\n  function drop(e: DragEvent) {\n    if (draggingOver.value === 2) {\n      e.preventDefault();\n      e.stopPropagation();\n      e.dataTransfer.dropEffect = 'none';\n      draggingOver.value = 0;\n      return false;\n    }\n    draggingOver.value = 0;\n  }\n\n  return {\n    inputs,\n    deletedInputs,\n    draggingOver,\n    dragover,\n    dragleave,\n    drop,\n    preventDragOver,\n    getInputName,\n    acceptedFormats,\n    t,\n  };\n}\n"],"names":["props","__props","isMobile","inject","SSR_safe_mq_breakpointIsMobile","inputs","deletedInputs","draggingOver","dragover","dragleave","drop","preventDragOver","getInputName","acceptedFormats","useFileInput","value","ref","input","openFileInNewTab","file","url","counter","t","useTrans","e"],"mappings":"mpCAkKA,MAAMA,EAAQC,EAqCRC,EAAWC,EAAOC,CAA8B,EAEhD,CACJ,OAAAC,EACA,cAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,CAAA,EACEC,GAAad,CAAK,otGClKhB,MAAAe,EAAQC,EAAU,IAAI,EACtBC,EAAQD,EAAsB,IAAI,EAExC,SAASE,GAAmB,CAC1B,GAAID,EAAM,MAAO,CACf,MAAME,EAAOF,EAAM,MAAM,MAAM,CAAC,EAC1BG,EAAM,IAAI,gBAAgBD,CAAI,EACpC,OAAO,KAAKC,CAAG,EACf,IAAI,gBAAgBA,CAAG,CACzB,CACF,yXC5DO,SAASN,GAAad,EAI1B,CACK,MAAAa,EAAkBb,EAAM,iBAAmB,CAC/C,kBACA,YACA,YAAA,EAGIO,EAAeS,EAAI,CAAC,EAC1B,IAAIK,EAAU,EACd,MAAMhB,EAASW,EAAI,CAACJ,EAAA,CAAc,CAAC,EAC7BN,EAAgBU,EAAI,CAAA,CAAE,EAC5B,SAASJ,GAAe,CACtB,OAAAS,IACO,GAAGrB,EAAM,MAAQA,EAAM,IAAM,MAAM,IAAIqB,CAAO,EACvD,CAEM,KAAA,CAAE,EAAAC,GAAMC,IAEd,SAASZ,EAAgBa,EAAc,CACrC,OAAAA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBA,EAAE,aAAa,WAAa,OACrB,EACT,CAEA,SAAShB,EAASgB,EAAc,CACzBA,EAAE,OAAuB,UAAY,UACxCjB,EAAa,MAAQM,EAAgB,SACnCW,EAAE,aAAa,MAAM,CAAC,EAAE,IAAA,EAEtB,EACA,GACFjB,EAAa,QAAU,GAAGI,EAAgBa,CAAC,CACjD,CAEA,SAASf,EAAUe,EAAc,CAC1BA,EAAE,OAAuB,UAAY,UAASjB,EAAa,MAAQ,EAC1E,CAEA,SAASG,EAAKc,EAAc,CACtB,GAAAjB,EAAa,QAAU,EACzB,OAAAiB,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBA,EAAE,aAAa,WAAa,OAC5BjB,EAAa,MAAQ,EACd,GAETA,EAAa,MAAQ,CACvB,CAEO,MAAA,CACL,OAAAF,EACA,cAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,EAAAS,CAAA,CAEJ"}