{"version":3,"file":"OzMultilineInput-CZ2_6Iwy.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 } 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\nconst props = withDefaults(\n  defineProps<{\n    value?: string\n    disabled?: boolean\n    required?: boolean\n    darkMode?: boolean | 'auto'\n    border?: OzMultilineInputBorder\n    fontSize?: OzMultilineInputFontSize\n    placeholder?: string\n    readonly?: boolean\n    dir?: 'ltr' | 'rtl' | 'auto'\n    allowNewlines?: boolean\n    isValid?: boolean\n    validationMessage?: string\n    testId?: string\n    minHeight?: number\n    maxLength?: number\n    paddingClass?: VueCssClass\n    isScrollable?: boolean\n    inputClasses?: VueCssClass\n    ariaDescribedby?: string\n    cols?: number // TODO (PRO-15397): Remove this prop after the otherAttrs non-reactivity issue is fixed\n  }>(),\n  {\n    value: '',\n    disabled: false,\n    required: false,\n    darkMode: 'auto',\n    border: 'full',\n    fontSize: 17,\n    placeholder: '',\n    maxLength: undefined,\n    readonly: false,\n    dir: 'auto',\n    allowNewlines: false,\n    isValid: true,\n    validationMessage: '',\n    testId: 'multilineInput',\n    minHeight: 0,\n    paddingClass: undefined,\n    isScrollable: false,\n    inputClasses: undefined,\n    ariaDescribedby: undefined,\n    cols: undefined,\n  },\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 {\n  class: containerClass,\n  style: containerStyle,\n  ...otherAttrs\n} = useAttrs() as {\n  class?: string\n  style?: CSSProperties\n  otherAttrs: Data\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 currentValue = ref(props.value)\n\nconst VALIDATION_MESSAGE_ID = uniqueId('validationMessageId')\n\nconst ariaDescribedbyValue = computed<string>(() => {\n  if (props.ariaDescribedby) return `${VALIDATION_MESSAGE_ID} ${props.ariaDescribedby}`\n  return VALIDATION_MESSAGE_ID\n})\n\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    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n    <textarea\n      ref=\"inputElement\"\n      v-model=\"currentValue\"\n      :disabled=\"disabled\"\n      :placeholder=\"placeholder\"\n      :rows=\"1\"\n      :cols=\"cols\"\n      :maxlength=\"maxLength\"\n      :data-testid=\"testId\"\n      :style=\"{ ...style, boxShadow: 'none' }\"\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      :dir=\"dir\"\n      :readonly=\"readonly\"\n      :aria-invalid=\"isValid ? 'false' : 'true'\"\n      :aria-errormessage=\"VALIDATION_MESSAGE_ID\"\n      :aria-describedby=\"ariaDescribedbyValue\"\n      :aria-required=\"required || undefined\"\n      v-bind=\"{ ...otherAttrs }\"\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","class","containerClass","style","containerStyle","otherAttrs","useAttrs","inputElement","ref","height","sizeObserver","isInputFocused","expose","focus","nextTick","value","blur","select","computed","props","isScrollable","maxHeight","minHeight","overflowY","currentValue","VALIDATION_MESSAGE_ID","uniqueId","ariaDescribedbyValue","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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"}