{"version":3,"file":"OzMultilineInput-5f4e30d7.js","sources":["../../../app/javascript/library/v4/components/OzMultilineInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { observeSizeChange } from '@@/bits/resize_observer'\nimport type { VueCssClass } from '@@/types'\nimport { uniqueId } from 'lodash-es'\nimport type { CSSProperties, Data, TextareaHTMLAttributes } from 'vue'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\n/**\n * *Note: Do NOT put CSS transition for height on this element, if you do the autosizing will NOT work.\n * Any style/class prop passsed to this component will be applied to the parent div container,\n * and fallthrough attributes such aria attributes will be passed onto the input element.\n\n * Compared to the old multiline_input, the '@input' and '@enter' events emit the event object, not the string value.\n *\n * Recommended usage:\n * <OzMultilineInput :value=\"value\" @input=\"onInput\" @enter=\"onEnter\" />\n */\n\nexport type OzMultilineInputBorder = 'solid_full' | 'full' | 'bottom' | 'none'\nexport type OzMultilineInputFontSize = 14 | 17 | 20\n\ninterface Props extends TextareaHTMLAttributes {\n  value?: string\n  darkMode?: boolean | 'auto'\n  border?: OzMultilineInputBorder\n  fontSize?: OzMultilineInputFontSize\n  allowNewlines?: boolean\n  isValid?: boolean\n  validationMessage?: string\n  testId?: string\n  paddingClass?: VueCssClass\n  isScrollable?: boolean\n  inputClasses?: VueCssClass\n  // TODO: remove this declared prop and update consumers to pass in `maxlength` instead of `:max-length`\n  maxLength?: number\n  minHeight?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  value: '',\n  darkMode: 'auto',\n  border: 'full',\n  fontSize: 17,\n  placeholder: '',\n  allowNewlines: false,\n  isValid: true,\n  validationMessage: '',\n  testId: 'multilineInput',\n  minHeight: 0,\n  paddingClass: undefined,\n  isScrollable: false,\n  inputClasses: undefined,\n  maxLength: undefined,\n})\n\nconst emit = defineEmits<{\n  (e: 'input', event: InputEvent): void\n  (e: 'enter', event: KeyboardEvent): void\n  (e: 'blur', event: FocusEvent): void\n  (e: 'click', event: PointerEvent): void\n  (e: 'escape', event: KeyboardEvent): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'focusout', event: FocusEvent): void\n  (e: 'keyup', event: KeyboardEvent): void\n  (e: 'paste', event: ClipboardEvent): void\n  (e: 'arrow-down-on-last-line'): void\n  (e: 'arrow-up-on-first-line'): void\n}>()\n\nconst inputElement = ref<HTMLTextAreaElement>()\nconst height = ref<null | number>(null)\nconst sizeObserver = ref<ResizeObserver | null>(null)\nconst isInputFocused = ref(false)\n\ndefineExpose({\n  focus: () => {\n    nextTick(() => inputElement.value?.focus())\n  },\n  blur: () => {\n    inputElement.value?.blur()\n  },\n  select: () => {\n    nextTick(() => inputElement.value?.select())\n  },\n  height,\n})\n\nconst style = computed<CSSProperties>(() => {\n  if (!height.value) return {}\n  if (props.isScrollable) return { height: `${height.value}px`, maxHeight: `${props.minHeight}px`, overflowY: 'auto' }\n  return { height: `${height.value}px` }\n})\n\nconst textAreaStyle = computed<CSSProperties>(() => ({\n  ...style.value,\n  boxShadow: 'none',\n}))\n\nconst currentValue = ref(props.value)\n\nconst VALIDATION_MESSAGE_ID = uniqueId('validationMessageId')\n\n// #region retain class & style props for parent div, and pass other attrs to the textarea\ninterface Attrs extends Data, TextareaHTMLAttributes {\n  class?: string\n  style?: CSSProperties\n}\n\nconst rawAttrs = useAttrs() as Attrs\nconst attrs = computed(() => {\n  const { class: containerClass, style: containerStyle, ...otherAttrs } = rawAttrs\n\n  const textareaAttrs = { rows: 1, dir: 'auto', ...otherAttrs }\n  return { containerClass, containerStyle, textareaAttrs }\n})\n\nconst containerClass = computed(() => attrs.value.containerClass)\nconst containerStyle = computed(() => attrs.value.containerStyle)\nconst textareaAttrs = computed(() => attrs.value.textareaAttrs)\n\nconst ariaRequired = computed<boolean>(() => Boolean(textareaAttrs.value.required))\nconst ariaDescribedby = computed<string>(() => {\n  if (textareaAttrs.value['aria-describedby'])\n    return `${VALIDATION_MESSAGE_ID} ${textareaAttrs.value['aria-describedby']}`\n  return VALIDATION_MESSAGE_ID\n})\n// #endregion\nfunction onFocus(e: FocusEvent): void {\n  isInputFocused.value = true\n  emit('focus', e)\n}\n\nfunction onFocusOut(e: FocusEvent): void {\n  isInputFocused.value = false\n  emit('focusout', e)\n}\n\nfunction onInput(e: InputEvent): void {\n  removeNewlinesIfDisallowed()\n  emit('input', e)\n}\n\nfunction onEnter(e: KeyboardEvent): void {\n  // In languages like Chinese, Japanese, & Korean, users input characters using an IME.\n  // If they are in composing mode (usually indicated by an underline under the word),\n  // and they press Enter, we could receive 2 keydown events. Most sources say this is\n  // a bug. We can ignore one of the 2 events by checking isComposing or keyCode === 229\n  // for legacy browsers.\n  // https://github.com/vuejs/vue/issues/10277#issuecomment-873337252\n  if (e.isComposing || e.keyCode === 229) return\n  if (props.allowNewlines) return\n  emit('enter', e)\n  e.preventDefault()\n}\n\nfunction onArrowDown(): void {\n  // emit an event when arrow down key is pressed and the cursor is on the last line of the textarea\n  // the default behaviour for arrow down on the last line is move to the end of the line\n  // we only emit a special event to be handled if the cursor is already at the end of the last line => check selectionStart === value.length\n  if (inputElement.value?.selectionStart === inputElement.value?.value.length) {\n    emit('arrow-down-on-last-line')\n  }\n}\n\nfunction onArrowUp(): void {\n  // emit an event when arrow up key is pressed and the cursor is on the first line of the textarea\n  // the default behaviour for arrow up on the first line is move to the start of the line\n  // we only emit a special event to be handled if the cursor is already at the start of the first line => check selectionStart === 0\n  if (inputElement.value?.selectionStart === 0) {\n    emit('arrow-up-on-first-line')\n  }\n}\n\nconst onClick = (e: PointerEvent) => {\n  emit('click', e)\n}\n\nconst onBlur = (e: FocusEvent) => {\n  emit('blur', e)\n}\n\nconst onPaste = (e: ClipboardEvent) => {\n  emit('paste', e)\n}\n\nfunction removeNewlinesIfDisallowed(): void {\n  if (props.allowNewlines) return\n  const sanitizedValue = currentValue.value.replace(/\\n|\\r/g, '')\n  if (currentValue.value !== sanitizedValue) {\n    currentValue.value = sanitizedValue\n  }\n}\n\nfunction autosize(): void {\n  height.value = null // Otherwise scrollHeight will just be the previous height\n  nextTick(() => {\n    if (inputElement.value) {\n      height.value = Math.max(inputElement.value.scrollHeight, props.minHeight)\n      if (inputElement.value.scrollHeight === 0) {\n        setTimeout(() => {\n          if (inputElement.value) {\n            height.value = Math.max(inputElement.value.scrollHeight, props.minHeight)\n          }\n        }, 0)\n      }\n    }\n  })\n}\n\nwatch(\n  () => props.value,\n  (newValue) => {\n    currentValue.value = newValue || ''\n    autosize()\n    removeNewlinesIfDisallowed()\n  },\n  { immediate: true },\n)\n\nonMounted(() => {\n  sizeObserver.value = observeSizeChange(inputElement.value as HTMLElement, () => autosize())\n})\n\nonBeforeUnmount(() => {\n  sizeObserver.value?.disconnect()\n  sizeObserver.value = null\n})\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'relative',\n      border === 'solid_full' && [\n        'rounded-2xl',\n        'border-2 border-solid',\n        isValid\n          ? {\n              ...(isInputFocused\n                ? {\n                    'border-grape-500 dark:border-canary-500': darkMode === 'auto',\n                    'border-grape-500': darkMode === false,\n                    'border-canary-500': darkMode === true,\n                  }\n                : {\n                    'border-dark-ui-100 dark:border-light-ui-100': darkMode === 'auto',\n                    'border-dark-ui-100': darkMode === false,\n                    'border-light-ui-100': darkMode === true,\n                  }),\n            }\n          : 'border-danger-100',\n      ],\n      border === 'full' && [\n        'rounded-2xl',\n        'border-2 border-solid',\n        isValid\n          ? {\n              ...(isInputFocused && {\n                'border-grape-500 dark:border-canary-500': darkMode === 'auto',\n                'border-grape-500': darkMode === false,\n                'border-canary-500': darkMode === true,\n              }),\n              ...(!isInputFocused && { 'border-transparent': true }),\n            }\n          : 'border-danger-100',\n      ],\n      border === 'bottom' && [\n        'border-solid',\n        isValid && {\n          'border-b-0.5': true,\n          'border-divider-gray dark:border-divider-gray-dark': darkMode === 'auto',\n          'border-divider-gray': darkMode === false,\n          'border-divider-gray-dark': darkMode === true,\n        },\n        !isValid && 'border-b-1 border-danger-100',\n      ],\n      border === 'none' && [!isValid && 'border-b-1 border-solid border-danger-100'],\n      containerClass,\n    ]\"\n    :style=\"containerStyle\"\n  >\n    <!--\n    Without row=\"1\", scrollHeight will be the height of two lines,\n    even if there's only one line of text.\n\n    We also add a box-shadow none to remove the default focus style applied by kit.scss\n  -->\n    <textarea\n      ref=\"inputElement\"\n      v-model=\"currentValue\"\n      :maxlength=\"maxLength\"\n      :data-testid=\"testId\"\n      :style=\"textAreaStyle\"\n      :class=\"[\n        'resize-none box-border overflow-hidden w-full m-0 p-0',\n        'outline-none border-none bg-transparent',\n        {\n          'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n          'text-dark-text-100': darkMode === false,\n          'text-light-text-100': darkMode === true,\n        },\n        {\n          'placeholder:text-dark-text-300 dark:placeholder:text-light-text-300': darkMode === 'auto',\n          'placeholder:text-dark-text-300': darkMode === false,\n          'placeholder:text-light-text-300': darkMode === true,\n        },\n        'font-sans',\n        {\n          'text-body-small': fontSize === 14,\n          'text-body-posts': fontSize === 17,\n          'text-body-large': fontSize === 20,\n        },\n        (border === 'solid_full' || border === 'full') && [paddingClass || 'py-1.75 ps-4 pe-3'],\n        (border === 'bottom' || border === 'none') && [paddingClass || 'py-3 pe-3'],\n        inputClasses,\n      ]\"\n      :aria-invalid=\"isValid ? 'false' : 'true'\"\n      :aria-errormessage=\"VALIDATION_MESSAGE_ID\"\n      :aria-labelledby=\"textareaAttrs['aria-labelledby']\"\n      :aria-describedby=\"ariaDescribedby\"\n      :aria-required=\"ariaRequired\"\n      v-bind=\"textareaAttrs\"\n      @click=\"onClick\"\n      @input=\"onInput\"\n      @keydown.enter=\"onEnter\"\n      @keydown.escape=\"emit('escape', $event)\"\n      @keydown.down.exact=\"onArrowDown\"\n      @keydown.up.exact=\"onArrowUp\"\n      @focus=\"onFocus\"\n      @focusout=\"onFocusOut\"\n      @blur=\"onBlur\"\n      @keyup=\"emit('keyup', $event)\"\n      @paste.stop=\"onPaste\"\n    ></textarea>\n    <span\n      :id=\"VALIDATION_MESSAGE_ID\"\n      aria-live=\"polite\"\n      :data-testid=\"testId + 'validationMessage'\"\n      :class=\"[\n        'absolute',\n        'transition',\n        'text-danger-100',\n        'bg-transparent',\n        'font-semibold',\n        'truncate',\n        'max-w-[calc(100%-1.5rem)]',\n        'px-1',\n        'flex',\n        border === 'full' && ['-bottom-2 end-3.5', 'text-12-16'],\n        (border === 'bottom' || border === 'none') && ['-end-1', 'text-body-tiny'],\n      ]\"\n      @mousedown.prevent\n    >\n      <div\n        :class=\"[\n          isInputFocused\n            ? {\n                'bg-light-ui-100 dark:bg-dark-ui-100': darkMode === 'auto',\n                'bg-light-ui-100': darkMode === false,\n                'bg-dark-ui-100': darkMode === true,\n              }\n            : {\n                'bg-grey-100 dark:bg-grey-850': darkMode === 'auto',\n                'bg-grey-100': darkMode === false,\n                'bg-grey-850': darkMode === true,\n              },\n          'w-full',\n          'h-0.5',\n          'absolute',\n          'start-0',\n          'end-0',\n          'top-1/2',\n          'z-0',\n          'overflow-x-hidden',\n        ]\"\n      >\n        <div :class=\"['h-full', 'w-0.5', 'rounded-full', 'absolute', '-start-0.25', 'bg-danger-100']\" />\n        <div :class=\"['h-full', 'w-0.5', 'rounded-full', 'absolute', '-end-0.25', 'bg-danger-100']\" />\n      </div>\n      <div class=\"z-10\">\n        {{ !isValid ? validationMessage : null }}\n      </div>\n    </span>\n  </div>\n</template>\n"],"names":["__default__","inheritAttrs","inputElement","ref","height","sizeObserver","isInputFocused","expose","focus","nextTick","value","blur","select","style","computed","props","isScrollable","maxHeight","minHeight","overflowY","textAreaStyle","boxShadow","currentValue","VALIDATION_MESSAGE_ID","uniqueId","rawAttrs","useAttrs","attrs","class","containerClass","containerStyle","otherAttrs","textareaAttrs","rows","dir","ariaRequired","Boolean","required","ariaDescribedby","onFocus","e","emit","onFocusOut","onInput","removeNewlinesIfDisallowed","onEnter","isComposing","keyCode","allowNewlines","preventDefault","onArrowDown","selectionStart","length","onArrowUp","onClick","onBlur","onPaste","sanitizedValue","replace","autosize","Math","max","scrollHeight","setTimeout","watch","newValue","immediate","onMounted","observeSizeChange","onBeforeUnmount","disconnect"],"mappings":"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"}