{"version":3,"file":"OzInput-11b8eebb.js","sources":["../../../app/javascript/library/v4/components/OzInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { uniqueId } from 'es-toolkit/compat'\nimport { computed, ref, useSlots } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: string\n    darkMode?: true | false | 'auto'\n    colorScheme?: OzInputColorScheme\n    valid?: 'yes' | 'no' | 'unknown'\n    disabled?: boolean\n    required?: boolean\n    testId?: string\n    validationMessage?: string\n    textAlign?: 'start' | 'end' | 'center'\n    noHorizontalPadding?: boolean\n    sizePreset?: OzInputSizePreset\n    xBorder?: boolean\n    shouldTruncateText?: boolean\n    value?: string // when binded by v-model, this prop is provided in vue 2\n    modelValue?: string // when binded by v-model, this prop is provided in vue 3\n    ariaDescribedby?: string\n  }>(),\n  {\n    type: 'text',\n    darkMode: 'auto',\n    colorScheme: OzInputColorScheme.Translucent,\n    valid: 'unknown',\n    disabled: false,\n    required: false,\n    testId: '',\n    validationMessage: '',\n    textAlign: undefined,\n    noHorizontalPadding: false,\n    sizePreset: OzInputSizePreset.H40px,\n    xBorder: true,\n    shouldTruncateText: false,\n    value: undefined,\n    modelValue: undefined,\n    ariaDescribedby: undefined,\n  },\n)\n\nconst isFocused = ref(false)\n\nconst internalValue = computed({\n  get: () => props.modelValue || props.value,\n  set: (val) => {\n    emit('update:modelValue', val)\n  },\n})\n\nconst inputElement = ref<HTMLInputElement | null>(null)\nconst validationMessageId = uniqueId('validationMessageId')\nconst isValid = computed(() => props.valid !== 'no')\nconst xValidationMessage = computed(() => !isValid.value && !!props.validationMessage?.length)\n\nconst slots = useSlots()\nconst hasExtraContent = computed(() => slots.extraContent)\n\nconst ariaDescribedbyValue = computed<string>(() => {\n  if (props.ariaDescribedby) return `${validationMessageId} ${props.ariaDescribedby}`\n  return validationMessageId\n})\n\nconst backgroundClasses = computed(() => {\n  if (props.colorScheme === OzInputColorScheme.Secondary) {\n    if (isFocused.value) {\n      return {\n        'bg-light-ui-100': props.darkMode === false,\n        'bg-dark-ui-100': props.darkMode === true,\n        'bg-light-ui-100 dark:bg-dark-ui-100': props.darkMode === 'auto',\n      }\n    } else {\n      return {\n        'bg-grey-100': props.darkMode === false,\n        'bg-grey-850': props.darkMode === true,\n        'bg-grey-100 dark:bg-grey-850': props.darkMode === 'auto',\n      }\n    }\n  } else if (props.colorScheme === OzInputColorScheme.Secondary200) {\n    if (isFocused.value) {\n      return {\n        'bg-light-ui-100': props.darkMode === false,\n        'bg-dark-ui-100': props.darkMode === true,\n        'bg-light-ui-100 dark:bg-dark-ui-100': props.darkMode === 'auto',\n      }\n    } else {\n      return {\n        'bg-light-ui-200': props.darkMode === false,\n        'bg-dark-ui-200': props.darkMode === true,\n        'bg-light-ui-200 dark:bg-dark-ui-200': props.darkMode === 'auto',\n      }\n    }\n  }\n\n  return ''\n})\n\nconst borderClasses = computed(() => {\n  if (!props.xBorder) return ''\n\n  if (props.colorScheme === OzInputColorScheme.Translucent) {\n    const commonClasses = {\n      'border-1': props.sizePreset === OzInputSizePreset.H32px || props.sizePreset === OzInputSizePreset.H20px,\n      'border-2': props.sizePreset === OzInputSizePreset.H40px,\n      'border-solid': true,\n    }\n\n    if (!isValid.value) return { ...commonClasses, 'border-danger-100': true }\n\n    if (props.disabled)\n      return {\n        ...commonClasses,\n        'border-grey-300': props.darkMode === false,\n        'border-white-disabled': props.darkMode === true,\n        'border-grey-300 dark:border-white-disabled': props.darkMode === 'auto',\n      }\n\n    if (isFocused.value)\n      return {\n        ...commonClasses,\n        'border-grape-500': props.darkMode === false,\n        'border-canary-500': props.darkMode === true,\n        'border-grape-500 dark:border-canary-500': props.darkMode === 'auto',\n      }\n\n    return {\n      ...commonClasses,\n      'border-dark-ui-100': props.darkMode === false,\n      'border-light-ui-100': props.darkMode === true,\n      'border-dark-ui-100 dark:border-light-ui-100': props.darkMode === 'auto',\n    }\n  } else if (props.colorScheme === OzInputColorScheme.Secondary) {\n    const commonClasses = {\n      'border-1': props.sizePreset === OzInputSizePreset.H32px || props.sizePreset === OzInputSizePreset.H20px,\n      'border-2': props.sizePreset === OzInputSizePreset.H40px,\n      'border-solid': true,\n    }\n\n    if (!isValid.value) return { ...commonClasses, 'border-danger-100': true }\n\n    if (isFocused.value)\n      return {\n        ...commonClasses,\n        'border-grape-500': props.darkMode === false,\n        'border-canary-500': props.darkMode === true,\n        'border-grape-500 dark:border-canary-500': props.darkMode === 'auto',\n      }\n\n    return {\n      ...commonClasses,\n      'border-transparent': true,\n    }\n  } else if (props.colorScheme === OzInputColorScheme.Secondary200) {\n    const commonClasses = {\n      'border-2': true,\n      'border-solid': true,\n    }\n\n    if (isFocused.value)\n      return {\n        ...commonClasses,\n        'border-grape-500': props.darkMode === false,\n        'border-canary-500': props.darkMode === true,\n        'border-grape-500 dark:border-canary-500': props.darkMode === 'auto',\n      }\n\n    return {\n      ...commonClasses,\n      'border-transparent': true,\n    }\n  } else {\n    return ''\n  }\n})\n\nconst emit = defineEmits<{\n  (event: 'focusin', value: FocusEvent): void\n  (event: 'focusout', value: FocusEvent): void\n  (event: 'blur', value: FocusEvent): void\n  (event: 'input', value: InputEvent): void // vue 2 v-model, refer to https://v3-migration.vuejs.org/breaking-changes/v-model.html\n  (event: 'update:modelValue', value: string): void // vue 3 v-model, refer to https://vuejs.org/guide/components/v-model.html\n}>()\n\n// in vue-2, v-model is binded to the value prop and an inputEvent is expected to be emitted on input.\nconst onInput = (event: Event) => {\n  emit('input', event as InputEvent)\n}\n\nconst focusin = (event: FocusEvent) => {\n  isFocused.value = true\n  // Emit the focusin event again after we are done with our internal handling\n  // So the user of the component can listen to it if they want\n  emit('focusin', event)\n}\n\nconst focusout = (event: FocusEvent) => {\n  isFocused.value = false\n  // Emit the focusout event again after we are done with our internal handling\n  // So the user of the component can listen to it if they want\n  emit('focusout', event)\n}\n\nconst blur = (event: FocusEvent) => {\n  // Emit the blur event again after we are done with our internal handling\n  // So the user of the component can listen to it if they want\n  emit('blur', event)\n}\n\nconst focusInput = () => {\n  inputElement.value?.focus()\n}\n\nconst selectInput = () => {\n  inputElement.value?.select()\n}\n\nconst blurInput = () => {\n  inputElement.value?.blur()\n}\n\ndefineExpose({\n  focusInput,\n  selectInput,\n  blurInput,\n})\n</script>\n<script lang=\"ts\">\nexport enum OzInputSizePreset {\n  H20px = 'H20px',\n  H32px = 'H32px',\n  H40px = 'H40px',\n}\n\nexport enum OzInputColorScheme {\n  Translucent = 'Translucent',\n  Secondary = 'Secondary',\n  Secondary200 = 'Secondary200',\n}\n\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'transition',\n      'flex',\n      'flex-1',\n      'flex-row',\n      'items-center',\n      'box-border',\n      'relative',\n      backgroundClasses,\n      borderClasses,\n      sizePreset === OzInputSizePreset.H20px && [\n        'rounded',\n        'h-5',\n        slots.startAdornment ? 'ps-0' : 'ps-1',\n        slots.endAdornment ? 'pe-0' : 'pe-1',\n      ],\n      sizePreset === OzInputSizePreset.H32px && [\n        'rounded-xl',\n        'h-8',\n        slots.startAdornment || noHorizontalPadding ? 'ps-0' : 'ps-2',\n        slots.endAdornment || noHorizontalPadding ? 'pe-0' : 'pe-2',\n      ],\n      sizePreset === OzInputSizePreset.H40px && [\n        'rounded-2xl',\n        'h-10',\n        slots.startAdornment || noHorizontalPadding ? 'ps-0' : 'ps-3.5',\n        slots.endAdornment || noHorizontalPadding ? 'pe-0' : 'pe-2.5',\n      ],\n      'font-sans',\n    ]\"\n  >\n    <!-- @slot adornment is at the beginning of the input -->\n    <slot name=\"startAdornment\"></slot>\n\n    <!-- We have to add \"!\" to make color and text tailwind classes important!\n         so they won't be overidden by the scss stylesheet (_textfield.scss)\n         TODO: remove those scss stylesheets -->\n    <!-- eslint-disable vue/no-deprecated-dollar-listeners-api, TODO: we still need the $listeners for vue 2, can remove in vue 3 -->\n    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n    <input\n      ref=\"inputElement\"\n      v-bind=\"$attrs\"\n      v-model=\"internalValue\"\n      :data-pw=\"testId\"\n      :data-testid=\"testId\"\n      :aria-invalid=\"xValidationMessage\"\n      :aria-errormessage=\"validationMessageId\"\n      :aria-describedby=\"ariaDescribedbyValue\"\n      :aria-required=\"required || undefined\"\n      :class=\"[\n        'oz-input',\n        {\n          'input-autofill': darkMode === false,\n          'dark:input-autofill-dark': darkMode === true,\n          'input-autofill dark:input-autofill-dark': darkMode === 'auto',\n        },\n        {\n          '!placeholder-dark-text-300': darkMode === false,\n          '!placeholder-light-text-300': darkMode === true,\n          '!placeholder-dark-text-300 dark:!placeholder-light-text-300': darkMode === 'auto',\n        },\n        {\n          '!text-input-body-small': sizePreset === OzInputSizePreset.H32px || sizePreset === OzInputSizePreset.H20px,\n          '!text-body-posts': sizePreset === OzInputSizePreset.H40px,\n        },\n        {\n          '!text-dark-text-100': darkMode === false,\n          '!text-light-text-100': darkMode === true,\n          '!text-dark-text-100 dark:!text-light-text-100': darkMode === 'auto',\n        },\n        hasExtraContent ? 'input-with-extra-content' : 'input-without-extra-content',\n        disabled && {\n          '!placeholder-dark-text-400': darkMode === false,\n          '!placeholder-light-text-400': darkMode === true,\n          '!placeholder-dark-text-400 dark:!placeholder-light-text-400': darkMode === 'auto',\n        },\n        disabled && 'pointer-events-none',\n        {\n          'text-start': textAlign === 'start',\n          'text-end': textAlign === 'end',\n          'text-center': textAlign === 'center',\n        },\n        type === 'datetime-local' && {\n          'datetime-picker-auto': darkMode === 'auto',\n          'datetime-picker-dark': darkMode === true,\n          'datetime-picker-light': darkMode === false,\n          // on iOS mobile, the datetime picker text is rendered in the center by default, and text-align property doesn't work on it.\n          // so this is a hack to ensure that the input text is aligned based on the textAlign prop.\n          'text-last-start': true,\n        },\n        type === 'number' && 'number-input-no-spinner',\n        shouldTruncateText && 'truncate',\n      ]\"\n      :type=\"type\"\n      @input=\"onInput\"\n      @focusin=\"focusin\"\n      @focusout=\"focusout\"\n      @blur=\"blur\"\n      v-on=\"{ ...$listeners }\"\n    />\n    <!-- eslint-enable vue/no-deprecated-dollar-listeners-api -->\n\n    <!-- @slot adornment is at the end of the input -->\n    <slot name=\"endAdornment\"></slot>\n\n    <span\n      :id=\"validationMessageId\"\n      aria-live=\"polite\"\n      data-testid=\"validationMessage\"\n      :class=\"[\n        'absolute',\n        'end-2',\n        '-bottom-2',\n        'transition',\n        'text-12-16',\n        'text-danger-100',\n        'font-semibold',\n        'truncate',\n        'max-w-[calc(100%-1.5rem)]',\n        'px-1',\n        {\n          'bg-light-ui-100': darkMode === false,\n          'bg-dark-ui-100': darkMode === true,\n          'bg-light-ui-100 dark:bg-dark-ui-100': darkMode === 'auto',\n        },\n      ]\"\n      >{{ xValidationMessage ? validationMessage : null }}</span\n    >\n  </div>\n</template>\n<style lang=\"scss\" scoped>\n.oz-input {\n  @apply flex;\n  @apply flex-grow;\n  @apply shadow-none;\n  @apply focus:shadow-none;\n  @apply appearance-none;\n  @apply outline-none;\n  @apply border-none;\n  @apply bg-transparent;\n  @apply font-sans;\n  @apply w-full;\n\n  // this is just to remove margin and padding added by _textfield.scss\n  @apply my-0;\n  @apply py-0;\n\n  .input-with-extra-content {\n    @apply pe-3;\n  }\n  .input-without-extra-content {\n    @apply pe-3.5;\n  }\n\n  /* Overwrite default autofill styles */\n  .bg-light-ui-100 &.input-autofill:-webkit-autofill,\n  .bg-light-ui-100 &.input-autofill:-webkit-autofill:hover,\n  .bg-light-ui-100 &.input-autofill:-webkit-autofill:focus {\n    box-shadow: 0 0 0px 1000px theme('colors.light-ui.100') inset;\n    -webkit-text-fill-color: theme('colors.dark-text.100');\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .bg-dark-ui-100 &.input-autofill:-webkit-autofill,\n    .bg-dark-ui-100 &.input-autofill:-webkit-autofill:hover,\n    .bg-dark-ui-100 &.input-autofill:-webkit-autofill:focus,\n    .dark\\:bg-dark-ui-100 &.input-autofill:-webkit-autofill,\n    .dark\\:bg-dark-ui-100 &.input-autofill:-webkit-autofill:hover,\n    .dark\\:bg-dark-ui-100 &.input-autofill:-webkit-autofill:focus {\n      box-shadow: 0 0 0px 1000px theme('colors.dark-ui.100') inset;\n      -webkit-text-fill-color: theme('colors.light-text.100');\n    }\n  }\n\n  .bg-grey-100 &.input-autofill:-webkit-autofill,\n  .bg-grey-100 &.input-autofill:-webkit-autofill:hover,\n  .bg-grey-100 &.input-autofill:-webkit-autofill:focus {\n    box-shadow: 0 0 0px 1000px theme('colors.grey.100') inset;\n    -webkit-text-fill-color: theme('colors.dark-text.100');\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .bg-grey-850 &.input-autofill:-webkit-autofill,\n    .bg-grey-850 &.input-autofill:-webkit-autofill:hover,\n    .bg-grey-850 &.input-autofill:-webkit-autofill:focus,\n    .dark\\:bg-grey-850 &.input-autofill:-webkit-autofill,\n    .dark\\:bg-grey-850 &.input-autofill:-webkit-autofill:hover,\n    .dark\\:bg-grey-850 &.input-autofill:-webkit-autofill:focus {\n      box-shadow: 0 0 0px 1000px theme('colors.grey.850') inset;\n      -webkit-text-fill-color: theme('colors.light-text.100');\n    }\n  }\n}\n\n/* Since the datetime picker is quite inconsistent implemently for different browsers,\n    below are selectors which are non-standard-features for styling it.\n*/\n\n@mixin datetime-picker-text-light {\n  &:focus-visible,\n  &:active,\n  &:focus {\n    @apply bg-grape-500;\n    @apply text-light-text-100;\n    border-radius: 4px;\n  }\n}\n\n@mixin datetime-picker-text-dark {\n  &:focus-visible,\n  &:active,\n  &:focus {\n    @apply bg-canary-500;\n    @apply text-dark-text-100;\n    border-radius: 4px;\n  }\n}\n\n// Styles required to hide arrow buttons: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp\n.number-input-no-spinner::-webkit-outer-spin-button,\n.number-input-no-spinner::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n  text-align: center !important;\n}\n\n/* Firefox */\n.number-input-no-spinner[type='number'] {\n  -moz-appearance: textfield;\n  text-align: center !important;\n}\n\n.datetime-picker-auto::-webkit-datetime-edit-day-field {\n  @apply px-0.75;\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-day-field {\n  @apply px-0.75;\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-day-field {\n  @apply px-0.75;\n  @include datetime-picker-text-dark;\n}\n\n.datetime-picker-auto::-webkit-datetime-edit-month-field {\n  @apply px-0.75;\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-month-field {\n  @apply px-0.75;\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-month-field {\n  @apply px-0.75;\n  @include datetime-picker-text-dark;\n}\n\n.datetime-picker-auto::-webkit-datetime-edit-year-field {\n  @apply px-0.75;\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-year-field {\n  @apply px-0.75;\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-year-field {\n  @apply px-0.75;\n  @include datetime-picker-text-dark;\n}\n\n.datetime-picker-auto::-webkit-datetime-edit-hour-field {\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-hour-field {\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-hour-field {\n  @include datetime-picker-text-dark;\n}\n\n.datetime-picker-auto::-webkit-datetime-edit-minute-field {\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-minute-field {\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-minute-field {\n  @include datetime-picker-text-dark;\n}\n\n.datetime-picker-auto::-webkit-datetime-edit-second-field {\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-second-field {\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-second-field {\n  @include datetime-picker-text-dark;\n}\n.datetime-picker-auto::-webkit-datetime-edit-ampm-field {\n  @include datetime-picker-text-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-text-dark;\n  }\n}\n\n.datetime-picker-light::-webkit-datetime-edit-ampm-field,\n.datetime-picker-light::-webkit-datetime-edit-meridiem-field {\n  @include datetime-picker-text-light;\n}\n\n.datetime-picker-dark::-webkit-datetime-edit-ampm-field,\n.datetime-picker-dark::-webkit-datetime-edit-meridiem-field {\n  @include datetime-picker-text-dark;\n}\n\n@mixin datetime-picker-calendar-picker-icon {\n  @apply px-0.75;\n  @apply border-solid;\n  @apply border-2;\n  @apply border-transparent;\n  @apply rounded;\n  outline: none;\n}\n\n// hide the html datetime icon, but position it below the custom datetime-local icon that we visually show to users\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n  color: transparent;\n  background: none;\n  position: absolute;\n  inset-inline-end: 8px;\n}\n\ninput[type='datetime-local']:before {\n  display: block;\n  -webkit-mask-image: url('https://padlet.net/icons/svg/oricons/edit_date.svg');\n  mask-image: url('https://padlet.net/icons/svg/oricons/edit_date.svg');\n  mask-size: contain;\n  background-color: currentColor;\n  content: '';\n  width: 17px;\n  height: 17px;\n  position: absolute;\n  bottom: 9px;\n  inset-inline-end: 10px;\n}\n\n@mixin datetime-picker-calendar-picker-icon-light {\n  &:focus-visible,\n  &:active,\n  &:focus {\n    @apply border-grape-500 border-2;\n  }\n  input[type='datetime-local']:before {\n    @apply text-dark-text-200;\n  }\n}\n\n@mixin datetime-picker-calendar-picker-icon-dark {\n  &:focus-visible,\n  &:active,\n  &:focus {\n    @apply border-2 border-canary;\n  }\n\n  input[type='datetime-local']:before {\n    @apply text-light-text-200;\n  }\n}\n\n.datetime-picker-auto::-webkit-calendar-picker-indicator {\n  @include datetime-picker-calendar-picker-icon;\n  @include datetime-picker-calendar-picker-icon-light;\n\n  @media (prefers-color-scheme: dark) {\n    @include datetime-picker-calendar-picker-icon-dark;\n  }\n}\n.datetime-picker-light::-webkit-calendar-picker-indicator {\n  @include datetime-picker-calendar-picker-icon;\n  @include datetime-picker-calendar-picker-icon-light;\n}\n\n.datetime-picker-dark::-webkit-calendar-picker-indicator {\n  @include datetime-picker-calendar-picker-icon;\n  @include datetime-picker-calendar-picker-icon-dark;\n}\n</style>\n"],"names":["OzInputSizePreset","OzInputColorScheme","__default__","inheritAttrs","isFocused","ref","internalValue","computed","get","props","modelValue","value","set","val","emit","inputElement","validationMessageId","uniqueId","isValid","valid","xValidationMessage","validationMessage","length","slots","useSlots","hasExtraContent","extraContent","ariaDescribedbyValue","ariaDescribedby","backgroundClasses","colorScheme","darkMode","borderClasses","xBorder","commonClasses","sizePreset","disabled","onInput","event","focusin","focusout","blur","focusInput","focus","selectInput","select","blurInput","expose"],"mappings":"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"}