{"version":3,"file":"BaseInput.vue_vue_type_script_setup_true_lang-73343b25.js","sources":["../../src/components/forms/form.enum.ts","../../src/components/forms/BaseInput.vue"],"sourcesContent":["export enum FORM_SELECT_VALUE_TYPE {\n  NAME = 'name',\n  LANGUAGE = 'language',\n  INDEX = 'index',\n  VALUE = 'value',\n  TYPE = 'type',\n  ROLE_NAME = 'name'\n}\n\nexport enum FORM_INPUT_TYPE {\n  NUMBER = 'number',\n  STRING = 'string'\n}\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { FORM_INPUT_TYPE } from '@/components/forms/form.enum'\n\nconst props = defineProps({\n  id: {\n    type: String,\n    default: null\n  },\n  label: {\n    type: String,\n    default: ''\n  },\n  showLable: {\n    type: Boolean,\n    default: true\n  },\n  name: {\n    type: String,\n    default: ''\n  },\n  placeholder: {\n    type: String,\n    default: ''\n  },\n  autocomplete: {\n    type: String,\n    default: ''\n  },\n  error: {\n    type: String,\n    default: ''\n  },\n  modelValue: {\n    required: true\n  },\n  inputType: {\n    type: String,\n    required: false\n  },\n  disabled: {\n    type: Boolean,\n    required: false\n  },\n  maxInt: {\n    type: Number,\n    required: false\n  },\n  minInt: {\n    type: Number,\n    required: false\n  },\n  isContactus: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isLightGray: {\n    type: Boolean,\n    required: false,\n    default: true\n  },\n  hasBorder: {\n    type: Boolean,\n    required: false,\n    default: true\n  },\n  isSmallLabel: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isBoldLabel: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isLabelBold: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isSettings: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isEditable: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isPassword: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isNewPassword: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isEmail: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  success: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isLightMode: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isPasswordIcon: {\n    type: String,\n    required: false\n  },\n  isPasswordStyling: {\n    type: String,\n    required: false\n  },\n  labelClass: {\n    type: String,\n    requried: false,\n    default: ''\n  },\n  isEnterKeySupport: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isCustomClass: {\n    type: String,\n    required: false,\n    default: ''\n  }\n})\nconst input = ref<HTMLElement | null>(null)\n\nconst inputClasses = computed(() => {\n  switch (true) {\n    case props.isContactus:\n      return 'section-primary border-b px-1 pb-3'\n    case props.isLightGray:\n      return 'rounded-md bg-neutral-100 px-4 dark:bg-[#17191F]'\n    case props.isLabelBold:\n      return 'font-bold'\n    case props.isSettings:\n      return 'rounded-lg py-5 p-xsmall mb-4 font-semibold'\n    case props.isLightMode:\n      return 'bg-gray-100 text-text-primary autofill:text-fill-text-primary-DEFAULT autofill:shadow-fill-background-primary-DEFAULT rounded-md px-4'\n    default:\n      return `rounded-md px-4 section-primary`\n  }\n})\n\nconst emit = defineEmits(['update:modelValue', 'click', 'check', 'enter'])\n/**\n * Emit for Toggle to show and hide password\n */\nconst handleClick = () => {\n  if (props.isEnterKeySupport) {\n    emit('click')\n  }\n}\n\n/**\n * @param event on change\n * Emit for password validation\n */\nconst handleInput = (event: Event) => {\n  emit('check', (event.target as HTMLInputElement).value)\n}\n\n/**\n * enable focus on input for UserName\n */\nconst focusInput = () => {\n  input.value?.focus()\n}\n/**\n * Emits an 'enter' event.\n */\nconst onEnter = () => {\n  emit('enter')\n}\n</script>\n\n<template>\n  <div :class=\"[{ 'my-2': !showLable }, isSettings ? 'mx-2 lg:mx-0' : '']\">\n    <div v-if=\"showLable\" class=\"flex items-center justify-between\">\n      <label\n        :for=\"props.name || `${props.label + props.placeholder}`\"\n        class=\"my-2 block text-base\"\n        :class=\"[\n          props.labelClass,\n          props.isSmallLabel ? 'text-sm' : '',\n          props.isSettings ? 'text-xs font-semibold md:text-sm lg:text-base' : '',\n          props.isBoldLabel ? 'font-medium' : ''\n        ]\"\n        v-html=\"props.label\"\n      >\n      </label>\n      <slot />\n    </div>\n    <div class=\"relative\">\n      <input\n        ref=\"input\"\n        v-bind=\"$attrs\"\n        :id=\"props.id || props.name || `${props.label + props.placeholder}`\"\n        class=\"p-small mb-1 block w-full\"\n        :class=\"[\n          props.error ? 'border-red-500' : 'border-text-tertiary',\n          props.isEmail ? 'text-btn-primary-disabled' : '',\n          props.isSettings ? 'p-small md:p-normal py-1' : '',\n          inputClasses,\n          props.isCustomClass,\n          props.isEnterKeySupport ? 'py-2' : 'py-3',\n\n          { border: hasBorder }\n        ]\"\n        :placeholder=\"props.placeholder\"\n        :autocomplete=\"props.autocomplete || undefined\"\n        :value=\"modelValue\"\n        :max=\"maxInt\"\n        :min=\"minInt\"\n        :disabled=\"props.disabled\"\n        :type=\"props.inputType ? props.inputType : FORM_INPUT_TYPE.STRING\"\n        @change=\"(event: Event) => {\n          props.inputType == FORM_INPUT_TYPE.NUMBER ?\n            emit('update:modelValue', Number.parseInt((event.target as HTMLInputElement).value)) :\n            emit('update:modelValue', (event.target as HTMLInputElement).value)\n        }\"\n        @input=\"handleInput\"\n        @keydown.enter=\"onEnter\"\n      />\n      <div\n        :class=\"[\n          'absolute inset-y-0 right-0 flex cursor-pointer items-center pr-2',\n          { hidden: !props.error || props.isEmail }\n        ]\"\n        @click=\"emit('update:modelValue', '')\"\n      >\n        <FontAwesomeIcon\n          icon=\"fa-circle-xmark\"\n          class=\"\"\n          :class=\"[\n            props.isSettings\n              ? 'text-brand absolute right-2 top-3 h-5 xl:right-[-25px]'\n              : 'error h-4 w-4'\n          ]\"\n        />\n      </div>\n      <div\n        v-if=\"props.isEditable && !props.error && !props.success\"\n        class=\"absolute inset-y-0 right-0 flex cursor-pointer items-center pr-2\"\n      >\n        <FontAwesomeIcon icon=\"fa-pen\" class=\"h-4 w-4 flex-1\" @click=\"focusInput\" />\n      </div>\n      <button\n        v-if=\"props.isPassword && !props.error && !props.success\"\n        type=\"button\"\n        class=\"absolute inset-y-0 right-0 flex cursor-pointer items-center pr-2\"\n      >\n        <font-awesome-icon\n          v-if=\"props.isPasswordIcon\"\n          :class=\"props.isPasswordStyling\"\n          @click=\"handleClick\"\n          :icon=\"props.isPasswordIcon\"\n        />\n      </button>\n    </div>\n    <p\n      :class=\"[\n        'p-xsmall error ',\n        { hidden: !props.error },\n        props.isEmail ? 'text-right' : 'text-left'\n      ]\"\n    >\n      {{ props.error.charAt(0).toUpperCase() + props.error.slice(1) }}\n    </p>\n    <p\n      :class=\"['p-xsmall ', 'error']\"\n      v-if=\"props.inputType == FORM_INPUT_TYPE.NUMBER && (modelValue as number) >= (maxInt as number)\"\n    >\n      Number must be less than {{ props.maxInt }}\n    </p>\n  </div>\n</template>\n"],"names":["FORM_SELECT_VALUE_TYPE","FORM_INPUT_TYPE","props","__props","input","ref","inputClasses","computed","emit","__emit","handleClick","handleInput","event","focusInput","_a","onEnter"],"mappings":"kJAAY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,UAAY,OANFA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,kvDCLZ,MAAMC,EAAQC,EAyIRC,EAAQC,EAAwB,IAAI,EAEpCC,EAAeC,EAAS,IAAM,CAClC,OAAQ,GAAM,CACZ,KAAKL,EAAM,YACF,MAAA,qCACT,KAAKA,EAAM,YACF,MAAA,mDACT,KAAKA,EAAM,YACF,MAAA,YACT,KAAKA,EAAM,WACF,MAAA,8CACT,KAAKA,EAAM,YACF,MAAA,wIACT,QACS,MAAA,iCACX,CAAA,CACD,EAEKM,EAAOC,EAIPC,EAAc,IAAM,CACpBR,EAAM,mBACRM,EAAK,OAAO,CACd,EAOIG,EAAeC,GAAiB,CAC/BJ,EAAA,QAAUI,EAAM,OAA4B,KAAK,CAAA,EAMlDC,EAAa,IAAM,QACvBC,EAAAV,EAAM,QAAN,MAAAU,EAAa,OAAM,EAKfC,EAAU,IAAM,CACpBP,EAAK,OAAO,CAAA"}