{"version":3,"file":"TextField.cjs","sources":["../../common/TextField/TextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, VNode } from \"vue\";\n\nimport { Icon } from \"../Icon\";\nimport { TextFieldClassesKey, TextFieldProps } from \"./types\";\n\nconst {\n  size = \"medium\",\n  label = \"\",\n  placeholder = \"\",\n  modelValue = \"\",\n  type = \"text\",\n  disabled = false,\n  id = \"\",\n  error = false,\n  success = false,\n  helperText = \"\",\n  pill = false,\n  toolTipIcon = \"information-circle-icon\",\n  showToolTipIcon = false,\n  trailingIcon = \"\",\n  endIcon = \"\",\n  classes = {} as Partial<Record<TextFieldClassesKey, string>>,\n} = defineProps<TextFieldProps>();\n\nconst emits = defineEmits([\"update:modelValue\", \"onTrailingIconClick\", \"onEndIconClick\", \"onTooltipClick\"]);\n\nconst value = computed({\n  get: () => modelValue,\n  set: (value2) => emits(\"update:modelValue\", value2),\n});\n\nconst attrs = useAttrs();\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst isFocused = ref(false);\n\nconst handleFocus = () => {\n  isFocused.value = true;\n};\nconst handleBlur = () => {\n  isFocused.value = false;\n};\n\ndefineSlots<{\n  trailingIconSlot(): VNode;\n  endIconSlot(): VNode;\n  tooltip(): VNode;\n}>();\n\ndefineOptions({\n  isSelect: true,\n  click: true,\n});\n\ndefineExpose({\n  inputRef,\n});\n\nconst clickHandler = (payload: MouseEvent) => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return (attrs as any).click(payload);\n};\n</script>\n\n<template>\n  <div :class=\"['relative w-full items-stretch', $attrs.class, classes?.container]\" data-testid=\"textfield-root\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      :class=\"['label', success && !disabled ? 'success-label' : error && !disabled ? 'error-label' : 'default-label', classes?.label]\"\n    >\n      {{ label }}\n      <Icon\n        v-if=\"showToolTipIcon && !$slots?.tooltip\"\n        :name=\"toolTipIcon\"\n        size=\"15\"\n        :class=\"['ml-1 w-[15px] cursor-pointer', classes?.toolTipIcon || '']\"\n        data-testid=\"tooltip\"\n        @click.stop=\"emits('onTooltipClick')\"\n      />\n      <slot v-if=\"showToolTipIcon && $slots?.tooltip\" name=\"tooltip\" />\n    </label>\n    <div\n      :class=\"[\n        'relative flex items-center',\n        success ? 'success-container' : error ? 'error-container' : 'default-container',\n        pill ? 'rounded-full' : 'rounded-lg',\n        `size-${size}`,\n        isFocused ? (success ? 'success-container-focus' : error ? 'error-container-focus' : 'default-container-focus') : '',\n        disabled && (classes?.disabled || 'disabled-input'),\n        classes?.inputContainer,\n      ]\"\n    >\n      <div v-if=\"trailingIcon || $slots?.trailingIconSlot\">\n        <Icon\n          v-if=\"trailingIcon && !$slots?.trailingIconSlot\"\n          :name=\"trailingIcon\"\n          data-testid=\"trailing-icon\"\n          :class=\"['icon mr-2 cursor-pointer', classes?.trailingIcon || '']\"\n          @click=\"emits('onTrailingIconClick')\"\n        />\n        <span v-if=\"$slots?.trailingIconSlot\">\n          <slot name=\"trailingIconSlot\" />\n        </span>\n      </div>\n      <!-- @ts-expect-error ignore button -->\n      <button\n        v-if=\"$attrs?.isSelect\"\n        type=\"button\"\n        :class=\"[\n          'flex w-full flex-1 appearance-none items-center truncate border-0 bg-transparent outline-hidden',\n          { 'text-app-gray-500 dark:text-app-gray-400': !value && !error && !success },\n        ]\"\n        v-bind=\"{ ...$attrs, class: '', style: {} }\"\n        @click=\"clickHandler\"\n      >\n        {{ `${value || placeholder}` }}\n      </button>\n      <input\n        v-else\n        :id=\"id\"\n        ref=\"inputRef\"\n        v-model=\"value\"\n        role=\"textbox\"\n        :type=\"type\"\n        :placeholder=\"placeholder\"\n        :aria-placeholder=\"placeholder || 'TextField Placeholder'\"\n        :aria-labelledby=\"label || 'TextField Label'\"\n        :disabled=\"disabled\"\n        :class=\"[\n          `size-input-${size}`,\n          pill ? 'rounded-full' : 'rounded-lg',\n          success ? 'success-input' : error ? 'error-input' : 'default-input',\n          'input-root',\n          disabled && (classes?.disabled || 'disabled-input'),\n          classes?.input,\n        ]\"\n        v-bind=\"{ ...$attrs, class: '', style: {} }\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      />\n      <div v-if=\"endIcon || $slots?.endIconSlot\">\n        <Icon\n          v-if=\"endIcon && !$slots?.endIconSlot\"\n          :name=\"endIcon\"\n          data-testid=\"end-icon\"\n          :class=\"['icon ml-2 cursor-pointer', classes?.endIcon || '']\"\n          @click.stop=\"emits('onEndIconClick')\"\n        />\n        <span v-if=\"$slots?.endIconSlot\">\n          <slot name=\"endIconSlot\" />\n        </span>\n      </div>\n    </div>\n    <p\n      v-if=\"helperText\"\n      :class=\"[\n        'mt-1 text-xs font-normal',\n        success && !disabled ? 'success-msg' : error && !disabled ? 'error-msg' : 'default-msg',\n        classes?.helperText,\n      ]\"\n      data-testid=\"helperText\"\n    >\n      {{ helperText }}\n    </p>\n  </div>\n</template>\n\n<style scoped>\n@reference \"../../styles/main.css\";\n\n.label {\n  @apply mb-2 p-0 text-sm font-medium flex justify-start;\n}\n\n.default-label {\n  @apply text-app-gray-900 dark:text-app-white;\n}\n\n.success-label {\n  @apply text-app-green-700 dark:text-app-green-400;\n}\n\n.error-label {\n  @apply text-app-red-700 dark:text-app-red-400;\n}\n\n.size-input-small {\n  @apply py-2 px-0 text-xs font-normal;\n  height: 33px;\n}\n\n.size-input-medium {\n  @apply py-3 px-0 text-sm font-normal;\n  height: 38px;\n}\n\n.size-input-large {\n  @apply py-3.5 px-0 text-base font-normal;\n  height: 48px;\n}\n\n.size-small {\n  @apply py-2 px-4 text-xs font-normal;\n  height: 37px;\n}\n\n.size-medium {\n  @apply py-3 px-4 text-sm font-normal;\n  height: 42px;\n}\n\n.size-large {\n  @apply py-3.5 px-4 text-base font-normal;\n  height: 52px;\n}\n\n.icon {\n  height: 18px;\n  width: 18px;\n}\n\n.input-root {\n  @apply block w-full outline-0 border-0! px-0.5;\n}\n\n.error-container {\n  @apply bg-app-red-50 border border-app-red-500 text-app-red-700 dark:bg-[#593B48] dark:border-app-red-500 dark:text-app-red-700;\n}\n\n.success-container {\n  @apply bg-app-green-50 border border-app-green-500 text-app-green-700 dark:border-app-green-500 dark:text-app-green-700;\n}\n\n.default-container {\n  @apply bg-app-gray-50 border border-app-gray-300 text-app-gray-900 dark:bg-app-gray-700 dark:border-app-gray-600 dark:text-app-white;\n}\n\n.error-input {\n  @apply bg-app-red-50 border-app-red-500 text-app-red-700 border-y placeholder-app-red-500 disabled:bg-app-gray-50 disabled:border-app-gray-300 disabled:placeholder-app-gray-500 dark:border-app-red-500 dark:placeholder-app-red-500 dark:text-app-red-500 dark:bg-[#593B48] dark:disabled:bg-app-gray-700 dark:disabled:border-app-gray-600 dark:disabled:placeholder-app-gray-400;\n}\n\n.success-input {\n  @apply bg-app-green-50 border-app-green-500 border-y text-app-green-700 placeholder-app-green-500 disabled:bg-app-gray-50 disabled:border-app-gray-300 disabled:placeholder-app-gray-500 dark:border-app-green-500 dark:placeholder-app-green-500 dark:text-app-green-700 dark:disabled:bg-app-gray-700 dark:disabled:border-app-gray-600 dark:disabled:placeholder-app-gray-400;\n}\n\n.default-input {\n  @apply bg-app-gray-50 border-app-gray-300 text-app-gray-900 border-y placeholder-app-gray-500 dark:bg-app-gray-700 dark:border-app-gray-600 dark:placeholder-app-gray-400 dark:text-app-white;\n}\n\n.error-container-focus {\n  @apply outline-0 ring-app-red-600 border-app-red-600 dark:ring-app-red-500 dark:border-app-red-500;\n}\n\n.success-container-focus {\n  @apply outline-0 ring-app-green-600 border-app-green-600 dark:ring-app-green-500 dark:border-app-green-500;\n}\n\n.default-container-focus {\n  @apply outline-0 ring-app-primary-600! border-app-primary-600! dark:ring-app-primary-500! dark:border-app-primary-500!;\n}\n\n.error-input-focus {\n  @apply outline-0 border-y! ring-app-red-600! border-app-red-600! dark:ring-app-red-500! dark:border-app-red-500!;\n}\n\n.success-input-focus {\n  @apply outline-0 border-y! ring-app-green-600! border-app-green-600! dark:ring-app-green-500! dark:border-app-green-500!;\n}\n\n.default-input-focus {\n  @apply outline-0 border-y! ring-app-primary-600! border-app-primary-600! dark:ring-app-primary-500! dark:border-app-primary-500!;\n}\n\n.success-msg {\n  @apply text-app-green-600 dark:text-app-green-400;\n}\n\n.error-msg {\n  @apply text-app-red-600 dark:text-app-red-400;\n}\n\n.default-msg {\n  @apply text-app-gray-500 dark:text-app-gray-400;\n}\n\n.disabled-input {\n  @apply text-app-gray-400! dark:text-app-gray-500! cursor-not-allowed! placeholder-app-gray-400! dark:placeholder-app-gray-500!;\n}\n\ninput:focus {\n  outline: 0 !important;\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus {\n  border: inherit;\n  border-left: 0 !important;\n  border-right: 0 !important;\n  -webkit-text-fill-color: inherit !important;\n  -webkit-box-shadow: unset;\n  transition: background-color 5000s ease-in-out 0s;\n}\n</style>\n"],"names":["emits","__emit","value","computed","__props","value2","attrs","useAttrs","inputRef","ref","isFocused","handleFocus","handleBlur","__expose","clickHandler","payload","_createElementBlock","$attrs","_normalizeClass","_createTextVNode","_toDisplayString","$slots","_createBlock","_unref","Icon","_renderSlot","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_openBlock","_mergeProps","_withDirectives","$event","_hoisted_5","_hoisted_6"],"mappings":"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"}