{"version":3,"file":"C180c9eh.js","sources":["../../../../src/complib/formFields/textInput/inputText.vue"],"sourcesContent":["<template>\n  <div\n    class=\"inputText\"\n    :class=\"[\n      width,\n      requiredMessage || matchesMessage\n        ? 'inputTextWithErrMsgData'\n        : 'inputTextWithoutErrMsgData',\n    ]\"\n  >\n    <FormKit\n      :id=\"id\"\n      v-model=\"value\"\n      type=\"text\"\n      :placeholder=\"t(placeholder)\"\n      :name=\"name ?? id\"\n      :input-class=\"{\n        input: true,\n        [inputClass]: inputClass,\n        '!bg-background-base': disabled && hasWhiteBg,\n        '!rounded-full': rounded,\n      }\"\n      :outer-class=\"'mb-sm'\"\n      :validation-visibility=\"validationVisibility\"\n      :validation-messages=\"{\n        required: t(requiredMessage),\n        matches: t(matchesMessage),\n      }\"\n      :validation=\"validationRules\"\n      label-class=\"text-md !leading-[19px] font-bold\"\n      :inner-class=\"{\n        'pt-[5px] relative': true,\n        'opacity-50': disabled,\n        [innerClass]: innerClass,\n      }\"\n      :messages-class=\"\n        rounded\n          ? 'hidden'\n          : '!bg-background-base px-sm py-[2px] text-status-danger-base'\n      \"\n      :disabled=\"disabled\"\n      :maxlength=\"maxlength\"\n      :auto-focus=\"autofocus\"\n      :data-test-id=\"testid.length > 0 ? testid : name\"\n      @blur=\"$emit('blur')\"\n      @node=\"(n) => (node = n)\"\n    >\n      <template #label>\n        <FormLabel\n          v-if=\"!$slots.label && label\"\n          :label=\"label\"\n          :required=\"required\"\n        />\n        <slot v-if=\"$slots.label\" name=\"label\" />\n      </template>\n      <template v-if=\"info && !disabled\" #suffix>\n        <Popup trigger-class=\"top-[15px] right-[15px] \">\n          <template #trigger>\n            <FaIcon\n              icon-class=\"fad fa-circle-info\"\n              style=\"\n                --fa-primary-color: var(--thm-white-base);\n                --fa-secondary-color: var(--thm-status-warn-base);\n                --fa-secondary-opacity: 1;\n              \"\n            />\n          </template>\n          <template #content>\n            {{ t(info) }}\n          </template>\n        </Popup>\n      </template>\n    </FormKit>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { FormLabel } from '@/complib';\nimport Popup from '~~/src/components/formFields/components/formInfoPopup.vue';\nimport FaIcon from '~~/src/components/fa-icon.vue';\nimport { FormKit } from '@formkit/vue';\nimport type { FormKitNode } from '@formkit/core';\nimport { type FormkitFieldProps } from '~/@types/formie';\n\nconst props = withDefaults(defineProps<FormkitFieldProps>(), {\n  label: '',\n  id: undefined,\n  required: true,\n  placeholder: '',\n  name: '',\n  width: 'w-full',\n  requiredMessage: '',\n  matchesMessage: '',\n  validation: () => [] as [rule: string, ...args: any[]][],\n  disabled: false,\n  maxlength: 255,\n  inputClass: '',\n  innerClass: '',\n  info: '',\n  validationVisibility: 'blur',\n  hasWhiteBg: true,\n  rounded: false,\n  parentNode: null,\n  testid: '',\n  autofocus: false,\n});\n\ndefineEmits<{\n  (e: 'blur'): void;\n}>();\n\nconst value = defineModel<string>({\n  default: '',\n});\n\nonMounted(() => {\n  const input: HTMLElement = document.querySelector(\n    `input[name='${props.name}']`,\n  );\n  if (props.autofocus) {\n    input.focus();\n  }\n});\n\nconst validationRules = computed<[rule: string, ...args: any[]][]>(() => {\n  const validations = [];\n  if (props.required) validations.push(['required']);\n  if (props.validation && typeof props.validation !== 'string')\n    validations.push(...props.validation);\n  if (props.validation && typeof props.validation === 'string')\n    validations.push([props.validation]);\n  return validations as [rule: string, ...args: any[]][];\n});\n\nconst { t } = useTrans();\n\nconst node = ref<FormKitNode | null>(null);\n</script>\n<style lang=\"postcss\" scoped>\n.inputText :deep(input.input) {\n  @apply border-l-1 border-r-1 border-t-1 outline-0 border-b-[3px] h-9 px-2 md:px-4 pt-2 text-md text-text-base ring-0 focus:border-b-[3px] shadow-none z-100;\n  @apply focus:border-b-primary-light rounded-alt-sm border-border-light;\n  @apply w-full;\n  &:placeholder-shown {\n    @apply overflow-ellipsis overflow-hidden;\n  }\n}\n\n.inputTextWithErrMsgData :deep([data-invalid='true']) {\n  input.input {\n    @apply !border-b-status-danger-base rounded-br-none rounded-bl-none;\n  }\n}\n\n.inputTextWithoutErrMsgData :deep([data-invalid='true']) {\n  input.input {\n    @apply !border-b-status-danger-base;\n  }\n}\n</style>\n"],"names":["props","__props","value","_useModel","onMounted","input","validationRules","computed","validations","useTrans","node","ref"],"mappings":"4mCAmFA,MAAMA,EAAQC,EA2BRC,EAAQC,EAEbF,EAAA,YAAA,EAEDG,EAAU,IAAM,CACd,MAAMC,EAAqB,SAAS,cAClC,eAAeL,EAAM,IAAI,IAAA,EAEvBA,EAAM,WACRK,EAAM,MAAM,CACd,CACD,EAEK,MAAAC,EAAkBC,EAA2C,IAAM,CACvE,MAAMC,EAAc,CAAA,EACpB,OAAIR,EAAM,UAAsBQ,EAAA,KAAK,CAAC,UAAU,CAAC,EAC7CR,EAAM,YAAc,OAAOA,EAAM,YAAe,UACtCQ,EAAA,KAAK,GAAGR,EAAM,UAAU,EAClCA,EAAM,YAAc,OAAOA,EAAM,YAAe,UAClDQ,EAAY,KAAK,CAACR,EAAM,UAAU,CAAC,EAC9BQ,CAAA,CACR,EAEK,CAAE,GAAMC,IAERC,EAAOC,EAAwB,IAAI"}