{"version":3,"file":"ContentPickerSourceMenu-CYfKH1S0.js","sources":["../../../app/javascript/vuecomponents/AiImageSearchSample.vue","../../../app/javascript/vuecomponents/ContentPickerSearchBar.vue","../../../app/javascript/vuecomponents/ContentPickerSearchModes.vue","../../../app/javascript/images/fallback_audio.png","../../../app/javascript/vuecomponents/ContentPickerSearchResultsAv.vue","../../../app/javascript/vuecomponents/ContentPickerSearchResultsImage.vue","../../../app/javascript/vuecomponents/content-picker-search-results-web.vue","../../../app/javascript/vuecomponents/web_browser_attribution.vue","../../../app/javascript/vuecomponents/ContentPickerSearchResults.vue","../../../app/javascript/vuecomponents/ChicletButton.vue","../../../app/javascript/vuecomponents/ContentPickerSourceMenuList.vue","../../../app/javascript/vuecomponents/ContentPickerSourceMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport { SearchFilters } from '@@/bits/web_search'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport { useContentPickerStore } from '@@/pinia/content_picker'\nimport { processedUrl } from '@padlet/vivaldi-client'\n\nconst emit = defineEmits<{\n  (name: 'run-sample-search', payload: { searchQuery: string }): void\n}>()\n\nconst AI_SEARCH_SAMPLE =\n  'An expressive oil painting of a basketball player dunking, as depicted as an explosion of a nebula'\n\nconst { setSearchQuery, search, pickSearchFilter } = useContentPickerStore()\n\nconst searchForSample = (): void => {\n  setSearchQuery({ query: AI_SEARCH_SAMPLE })\n  pickSearchFilter({ filter: SearchFilters.AiImages })\n  search()\n  emit('run-sample-search', { searchQuery: AI_SEARCH_SAMPLE })\n}\n</script>\n\n<template>\n  <div class=\"h-109 flex flex-col items-center justify-center\">\n    <div>\n      <img\n        :src=\"processedUrl('https://storage.googleapis.com/padlet-assets/image/basketball_nebula.webp')\"\n        width=\"240\"\n        height=\"240\"\n        alt=\"AI image\"\n        class=\"select-none rounded-lg\"\n      />\n    </div>\n    <div>\n      <p\n        class=\"py-3 w-71 text-center text-body-extra-small text-dark-text-100 dark:text-light-text-100 px-4 select-text\"\n      >\n        \"{{ AI_SEARCH_SAMPLE }}\"\n      </p>\n    </div>\n    <div>\n      <OzContainedButton\n        class=\"mb-10\"\n        :size-preset=\"OzContainedButtonSizePreset.H24px\"\n        :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n        :text=\"__('Try this example')\"\n        data-pw=\"aiImageSearchSample\"\n        @click=\"searchForSample\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { NoSearchFilterError } from '@@/bits/content_picker'\nimport { dir } from '@@/bits/current_dir'\nimport device from '@@/bits/device'\nimport { extractUrl } from '@@/bits/html_parser'\nimport { isUrl } from '@@/bits/url'\nimport OzBackButton from '@@/library/v4/components/OzBackButton.vue'\nimport OzCloseButton from '@@/library/v4/components/OzCloseButton.vue'\nimport OzIconButton, { OzIconButtonColorScheme } from '@@/library/v4/components/OzIconButton.vue'\nimport OzPlainButton, { OzPlainButtonColorScheme } from '@@/library/v4/components/OzPlainButton.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { storeToRefs } from 'pinia'\nimport { computed, onMounted, ref } from 'vue'\n\nconst props = defineProps<{\n  xBackButton: boolean\n  xClipboardButton: boolean\n  shouldWiggle: boolean\n  shouldForceFocusOnMount: boolean\n  searchBarPlaceholder: string\n  searchQuery: string\n  submitButtonDataId?: string\n  canAcceptLink?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (name: 'back'): void\n  (name: 'blur'): void\n  (name: 'search', query: string): void\n  (name: 'clear-search'): void\n  (name: 'clear-search-error'): void\n  (name: 'click'): void\n  (name: 'close'): void\n  (name: 'copy'): void\n  (name: 'error', error: NoSearchFilterError): void\n  (name: 'focus'): void\n  (name: 'input', value: string): void\n  (name: 'paste-click'): void\n  (name: 'select', data: string): void\n}>()\n\n// https://docs.microsoft.com/en-us/rest/api/cognitiveservices-bingsearch/bing-images-api-v5-reference\n// The maximum URL length is 2,048 characters. To ensure that your URL length does not exceed the limit,\n// the maximum length of your query parameters should be less than 1,500 characters.\n// If the URL exceeds 2,048 characters, the server returns 404 Not found.\n// Need to account for percent-encoded multi-code-point UTF-8 string.\nconst MAX_SEARCH_LENGTH = 1000\n\nconst { isPhone } = storeToRefs(useWindowSizeStore())\n\nconst searchBar = ref<HTMLInputElement | null>(null)\n\nconst isSearchBarFocused = ref<boolean>(false)\n\nconst shouldShowClipboardButton = computed(\n  () => props.xClipboardButton && !isPhone.value && !device.safari && !props.searchQuery,\n)\nconst shouldShowSubmitButton = computed(() =>\n  isSearchBarFocused.value ? !shouldShowClipboardButton.value : props.searchQuery,\n)\nconst isShowingRightButton = computed(() => shouldShowClipboardButton.value || shouldShowSubmitButton.value)\n\nconst handleCopyText = (): void => {\n  emit('copy')\n}\n\nconst handleSearchBarFocus = (): void => {\n  isSearchBarFocused.value = true\n  emit('focus')\n}\n\nconst onInput = (event): void => {\n  emit('input', event.target.value)\n  emit('clear-search-error')\n}\n\nconst select = (data: string): void => {\n  emit('select', data)\n}\n\nconst unfocusForTouchDevices = () => {\n  if (device.touchable && searchBar.value) {\n    // If it's touchable, keyboard will popup, we don't want that\n    searchBar.value.blur()\n  }\n}\n\n// If the search query is a link, use it as post attachment by calling this.select\n// Else use it to search with this.search\n// If we are in link input mode, default to web search\nconst processQuery = (): void => {\n  const query = props.searchQuery\n  emit('clear-search-error')\n  unfocusForTouchDevices()\n\n  if (!query) {\n    emit('clear-search')\n    return\n  }\n  if (props.canAcceptLink) {\n    if (isUrl(query)) {\n      select(query)\n      return\n    }\n    if (isUrl(`https://${query}`)) {\n      select(`https://${query}`)\n      return\n    }\n    const extractedUrl = extractUrl(query)\n    if (extractedUrl) {\n      select(extractedUrl)\n      return\n    }\n  }\n\n  emit('search', query)\n}\n\nconst handleSearchBarFocusOut = (): void => {\n  isSearchBarFocused.value = false\n  if (device.iphone) {\n    processQuery()\n  }\n  emit('blur')\n}\n\nconst resetSearch = (): void => {\n  emit('clear-search')\n  searchBar.value?.focus()\n}\n\nconst focusSearchBar = (): void => {\n  searchBar.value?.focus()\n}\n\nconst handleEnter = (event): void => {\n  if (!props.searchQuery) {\n    event.preventDefault()\n  }\n}\n\nonMounted((): void => {\n  if ((!device.touchable || props.shouldForceFocusOnMount) && searchBar.value) {\n    // If it's touchable, keyboard will popup, we don't want that\n    searchBar.value.focus()\n  }\n})\n\ndefineExpose({\n  focusSearchBar,\n})\n</script>\n\n<template>\n  <div :class=\"['flex', 'p-4', '@tablet-portrait/surface-container:pb-3', 'tablet-portrait:-@:pb-3', 'relative']\">\n    <OzBackButton\n      v-if=\"xBackButton\"\n      :color-scheme=\"isPhone ? OzIconButtonColorScheme.Secondary : OzIconButtonColorScheme.SecondaryClear\"\n      @click=\"emit('back')\"\n    />\n    <OzCloseButton\n      v-else\n      :color-scheme=\"isPhone ? OzIconButtonColorScheme.Secondary : OzIconButtonColorScheme.SecondaryClear\"\n      data-testid=\"contentPickerCloseButton\"\n      @click=\"emit('close')\"\n    />\n\n    <div\n      :class=\"[\n        'flex',\n        'ms-4',\n        'flex-row',\n        'items-center',\n        'relative',\n        'h-10 border-2 border-solid rounded-2xl',\n        'bg-grey-50 dark:bg-grey-800',\n        isSearchBarFocused ? 'border-grape-500 dark:border-canary-500' : 'border-transparent',\n        shouldWiggle && 'animate-wiggle',\n        'box-border',\n\n        // We animate the input focus (which shows the right button) by overlaying it on top of the right button and changing the width programmatically\n        'z-10',\n        'transition-[width] ease-in duration-200',\n        // Right icon button not visible: 56 = 40 (left button width) + 16 (margin-start for this div)\n        // Right icon button visible: 112 = 56 (explained above) + 12 (margin between input and right button) + 40 (right button width)\n        isShowingRightButton ? 'w-[calc(100%-112px)]' : 'w-[calc(100%-56px)]',\n      ]\"\n    >\n      <form class=\"flex grow\" @submit.prevent=\"processQuery\">\n        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n        <input\n          ref=\"searchBar\"\n          data-testid=\"contentPickerSearchBar\"\n          :dir=\"dir()\"\n          class=\"search-input\"\n          type=\"text\"\n          autocapitalize=\"off\"\n          :maxlength=\"MAX_SEARCH_LENGTH\"\n          :placeholder=\"searchBarPlaceholder\"\n          :aria-label=\"__('Search')\"\n          :value=\"searchQuery\"\n          @focusin=\"handleSearchBarFocus\"\n          @focusout=\"handleSearchBarFocusOut\"\n          @copy=\"handleCopyText\"\n          @cut=\"handleCopyText\"\n          @click=\"emit('click')\"\n          @input=\"onInput\"\n          @keydown.enter=\"handleEnter\"\n        />\n      </form>\n      <OzPlainButton\n        v-if=\"!isPhone && searchQuery\"\n        :class=\"['px-3', 'text-17', 'font-semibold']\"\n        :color-scheme=\"OzPlainButtonColorScheme.Secondary\"\n        :text=\"__('Clear')\"\n        @click=\"resetSearch\"\n      />\n    </div>\n    <div :class=\"['w-10', 'absolute end-4', isShowingRightButton ? 'visible' : 'invisible']\">\n      <!-- We show a different clipboard button as part of the menu list on mobile -->\n      <OzIconButton\n        v-show=\"shouldShowClipboardButton\"\n        key=\"desktop-right-icon-paste\"\n        :label=\"__('Paste clipboard')\"\n        :color-scheme=\"OzIconButtonColorScheme.SecondaryClear\"\n        icon-name=\"clipboard_outline\"\n        :icon-size=\"20\"\n        @click=\"emit('paste-click')\"\n      />\n      <OzIconButton\n        v-show=\"shouldShowSubmitButton\"\n        key=\"desktop-right-icon-forward\"\n        data-testid=\"contentPickerSubmitButton\"\n        :class=\"!searchQuery && 'aria-disabled:!bg-transparent'\"\n        :label=\"__('Submit')\"\n        :color-scheme=\"isPhone ? OzIconButtonColorScheme.Secondary : OzIconButtonColorScheme.SecondaryClear\"\n        icon-name=\"arrow_right\"\n        :data-pepin-id=\"submitButtonDataId\"\n        :disabled=\"!searchQuery\"\n        data-pepin-trigger=\"click\"\n        @click=\"processQuery\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.search-input {\n  @apply my-0 ps-3 md:ps-4 pe-3;\n  @apply shadow-none focus:shadow-none;\n  @apply font-sans dark:text-white-100 placeholder-dark-text-200 dark:placeholder-light-text-200;\n  @apply text-input-body;\n  @apply md:text-input-body-small;\n  @apply w-full;\n  @apply border-none;\n  @apply bg-transparent;\n}\n.skinny-button {\n  :deep(.text-label) {\n    margin: 0;\n    margin-right: 4px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport type { SearchFilters } from '@@/bits/web_search'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzTabs, { OzTabsPlacementMode } from '@@/library/v4/components/OzTabs.vue'\nimport { type ContentPickerSearchMode } from '@@/pinia/content_picker'\nimport { computed, ref } from 'vue'\n\nconst props = defineProps<{\n  searchModes: ContentPickerSearchMode[]\n  currentSearchFilter: SearchFilters\n}>()\n\nconst emit = defineEmits<{\n  (name: 'filter-selected', filter: string): void\n}>()\n\nconst displayedSearchModes = computed(() => props.searchModes.filter((mode) => mode.visible))\n\nconst isShook = ref<boolean>(false)\n\nconst shake = (): void => {\n  isShook.value = false\n  setTimeout(() => {\n    isShook.value = true\n  }, 1)\n}\n\ndefineExpose({\n  shake,\n})\n</script>\n\n<template>\n  <div class=\"flex shrink-0 flex-col mx-4\">\n    <div :class=\"['mx-4', 'md:mx-6', 'mt-1', 'md:mt-0', isShook && 'animate-shake']\">\n      <OzTabs\n        :placement-mode=\"OzTabsPlacementMode.Stretch\"\n        :aria-label=\"__('Content search tabs')\"\n        :tabs=\"displayedSearchModes\"\n        :current-tab-key=\"currentSearchFilter\"\n        @activate-tab=\"(_event, payload) => emit('filter-selected', payload.key)\"\n      />\n    </div>\n    <OzDivider :color-scheme=\"OzDividerColorScheme.Solid\" />\n  </div>\n</template>\n","export default \"__VITE_ASSET__DLdLIYRY__\"","<script setup lang=\"ts\">\nimport { getHostname } from '@@/bits/url'\nimport type { AudioSearchResult, VideoSearchResult } from '@@/bits/web_search'\nimport { SearchFilters } from '@@/bits/web_search'\nimport FallbackAudio from '@@/images/fallback_audio.png'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport { nextTick, onMounted, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  results: (AudioSearchResult | VideoSearchResult)[]\n  filter: SearchFilters\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', url: string): void\n}>()\n\nconst LOADING_IMAGES_BG_COLOR = ['red', 'blue', 'green', 'yellow', 'purple', 'pink', 'cyan', 'orange']\nconst CROP_ASPECT_RATIO = 1.8 /* 16.2:9 to remove borders nicely since 16/9=1.(7) is non-terminating */\nconst DEFAULT_THUMBNAIL_HEIGHT = 768\nconst DEFAULT_THUMBNAIL_WIDTH = DEFAULT_THUMBNAIL_HEIGHT * CROP_ASPECT_RATIO\n\nconst container = ref<HTMLUListElement>()\nconst imageWrappers = ref<HTMLLIElement[]>()\n\nconst imageWidth = ref(0)\n\nconst handleResultsUpdate = async (): Promise<void> => {\n  await nextTick()\n  imageWidth.value = imageWrappers.value && imageWrappers.value[0] ? imageWrappers.value[0].clientWidth : 0\n}\n\nconst select = (url: string): void => {\n  emit('select', url)\n}\n\nconst audioDescription = (result: AudioSearchResult): string => {\n  if (result.release_date) {\n    // podcast episode\n    const showName = result.show_name\n    if (showName) {\n      return showName + ' · ' + new Date(result.release_date).toLocaleDateString()\n    }\n    let shortenedDescription = result.description.split(' ').slice(0, 15).join(' ')\n    if (shortenedDescription.length < result.description.length) {\n      shortenedDescription = shortenedDescription + '...'\n    }\n    return new Date(result.release_date).toLocaleDateString() + ' · ' + shortenedDescription\n  }\n  return result.description\n}\n\nconst providerName = (result: VideoSearchResult): string => {\n  if (result.provider_name) return result.provider_name\n  return getHostname(result.url)\n}\n\nconst isUsingFallbackThumbnail = (result: AudioSearchResult): boolean => {\n  return !result.thumbnail_url || result.thumbnail_url === ''\n}\n\nwatch(() => props.results, handleResultsUpdate)\n\nonMounted((): void => {\n  imageWidth.value = (container.value?.clientWidth ?? 0) / 3 - 12\n  // After the components are auto-layouted, we assigned the fixed imageWidth so that\n  // Beethoven-Vivaldi can load the most size-optimal image\n  handleResultsUpdate()\n})\n</script>\n\n<template>\n  <ul\n    ref=\"container\"\n    :class=\"['w-full', 'grid', 'grid-cols-2', 'md:grid-cols-3', 'mb-2', 'mt-2', 'mx-0', 'gap-4', 'pt-1']\"\n  >\n    <li\n      v-for=\"(result, index) in results\"\n      ref=\"imageWrappers\"\n      :key=\"filter + '-result-' + index\"\n      :class=\"['p-1/2', 'flex', 'flex-col']\"\n    >\n      <div\n        :class=\"[\n          'rounded-2xl',\n          'focus:ring-2',\n          'focus:ring-grape-500',\n          'dark:focus:ring-canary-500',\n          'focus:ring-opacity-100',\n          'hover-hover:hover:ring-2',\n          'hover-hover:hover:ring-grape-500',\n          'hover-hover:dark:hover:ring-canary-500',\n          'hover-hover:hover:ring-opacity-100',\n          'cursor-pointer',\n        ]\"\n        tabindex=\"0\"\n        @click=\"select(result.url)\"\n        @keydown.enter=\"select(result.url)\"\n        @keydown.space=\"select(result.url)\"\n      >\n        <div class=\"relative\">\n          <ImageThumbnail\n            class=\"rounded-2xl\"\n            :placeholder-color=\"LOADING_IMAGES_BG_COLOR[index % 7]\"\n            :original-image-width=\"result.thumbnail_width || DEFAULT_THUMBNAIL_WIDTH\"\n            :original-image-height=\"result.thumbnail_height || DEFAULT_THUMBNAIL_HEIGHT\"\n            :title=\"result.title\"\n            :src=\"isUsingFallbackThumbnail(result) ? FallbackAudio : result.thumbnail_url\"\n            :proxy-image=\"!isUsingFallbackThumbnail(result)\"\n            :width=\"imageWidth\"\n            :resize-strategy=\"filter == SearchFilters.Audio ? 'stretch' : 'crop'\"\n            :aspect-ratio=\"filter == SearchFilters.Audio ? 1 : CROP_ASPECT_RATIO\"\n          />\n          <div\n            v-if=\"result.duration || filter == SearchFilters.Videos\"\n            :class=\"[\n              'ss01-nums',\n              'text-xs',\n              'h-5',\n              'rounded-xl',\n              'bg-nightfall-600',\n              'text-white-100',\n              'px-2',\n              'items-center',\n              'justify-center',\n              'flex',\n              'font-medium',\n              'absolute',\n              'bottom-1',\n              'right-1',\n            ]\"\n          >\n            <span v-if=\"filter == SearchFilters.Videos && !result.duration\" class=\"yt-live-text uppercase\">\n              {{ __('Live') }}\n            </span>\n            <template v-else>\n              {{ result.duration }}\n            </template>\n          </div>\n        </div>\n\n        <div class=\"mx-2 my-2\">\n          <div class=\"text-14-19 font-medium text-highway-100 dark:text-white-100 line-clamp-2\">{{ result.title }}</div>\n          <div\n            v-if=\"filter == SearchFilters.Audio\"\n            class=\"mt-1 text-body-extra-small leading-4 text-highway-100 dark:text-white-100\"\n            :title=\"result.description\"\n          >\n            {{ audioDescription(result) }}\n          </div>\n          <div\n            v-if=\"filter == SearchFilters.Videos\"\n            class=\"mt-1 text-12-15 text-highway-200 dark:text-white-200 truncate\"\n          >\n            {{ providerName(result) }}\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style lang=\"scss\" scoped>\n// Red dot before LIVE text\n.yt-live-text {\n  &:before {\n    display: inline-block;\n    width: 5px;\n    height: 5px;\n    vertical-align: 4%;\n    margin-right: 3px;\n    background: #f00;\n    content: '';\n    border-radius: 5px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { getHostname } from '@@/bits/url'\nimport type { ImageSearchResult } from '@@/bits/web_search'\nimport { SearchFilters } from '@@/bits/web_search'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport { fetchJson } from '@padlet/fetch'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  results: ImageSearchResult[]\n  filter: SearchFilters\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', url: string): void\n}>()\n\nconst LOADING_IMAGES_BG_COLOR = ['red', 'blue', 'green', 'yellow', 'purple', 'pink', 'cyan', 'orange']\n\nconst container = ref<HTMLUListElement>()\nconst imageWrappers = ref<HTMLLIElement[]>()\n\nconst imageWidth = ref(0)\n\nconst erroredThumbnailUrls = ref(new Set())\n\nconst validResults = computed(() =>\n  props.results.filter((result) => !erroredThumbnailUrls.value.has(result.thumbnail_url)),\n)\nconst isShowingAiImages = computed<boolean>(() => props.filter === SearchFilters.AiImages)\n\nconst handleResultsUpdate = async (): Promise<void> => {\n  await nextTick()\n  imageWidth.value = imageWrappers.value && imageWrappers.value[0] ? imageWrappers.value[0].clientWidth : 0\n}\n\nconst selectWithBeacon = (url: string, beaconLink: string): void => {\n  if (beaconLink) {\n    fetchJson(beaconLink, { cors: true })\n  }\n  emit('select', url)\n}\n\nconst providerName = (result: ImageSearchResult): string => {\n  if (result.provider_name) return result.provider_name\n  return getHostname(result.url)\n}\n\nconst handleImageError = (erroredUrl) => {\n  erroredThumbnailUrls.value = new Set([...erroredThumbnailUrls.value, erroredUrl])\n}\n\nwatch(() => props.results, handleResultsUpdate)\n\nonMounted((): void => {\n  imageWidth.value = (container.value?.clientWidth ?? 0) / 3 - 12\n  // After the components are auto-layouted, we assigned the fixed imageWidth so that\n  // Beethoven-Vivaldi can load the most size-optimal image\n  handleResultsUpdate()\n})\n</script>\n\n<template>\n  <ul\n    ref=\"container\"\n    :class=\"[\n      'w-full',\n      'grid',\n      'grid-cols-2',\n      !isShowingAiImages || results.length > 4 ? 'md:grid-cols-3' : '',\n      'mx-0',\n      'gap-4',\n      !isShowingAiImages ? 'my-2 pt-1' : 'pt-2 pb-4 md:pb-2 md:px-0.25 md:box-border',\n    ]\"\n  >\n    <li\n      v-for=\"(result, index) in validResults\"\n      ref=\"imageWrappers\"\n      :key=\"result.thumbnail_url\"\n      :class=\"['p-1/2', 'flex', 'flex-col', 'relative']\"\n    >\n      <div\n        :class=\"[\n          !isShowingAiImages && 'pb-1.5',\n          'rounded-2xl',\n          'focus:ring-2',\n          'focus:ring-grape-500',\n          'dark:focus:ring-canary-500',\n          'focus:ring-opacity-100',\n          'hover-hover:hover:ring-2',\n          'hover-hover:hover:ring-grape-500',\n          'hover-hover:dark:hover:ring-canary-500',\n          'hover-hover:hover:ring-opacity-100',\n          'cursor-pointer',\n          'flex',\n          'flex-col',\n        ]\"\n        :style=\"isShowingAiImages ? 'width: fit-content' : undefined\"\n        tabindex=\"0\"\n        :data-testid=\"`contentPickerSearchResultsImage-${index}`\"\n        @click=\"selectWithBeacon(result.url, result.beacon_link)\"\n        @keydown.enter=\"selectWithBeacon(result.url, result.beacon_link)\"\n        @keydown.space=\"selectWithBeacon(result.url, result.beacon_link)\"\n      >\n        <ImageThumbnail\n          v-if=\"result.width && result.height\"\n          class=\"rounded-2xl\"\n          :placeholder-color=\"LOADING_IMAGES_BG_COLOR[index % 7]\"\n          :original-image-width=\"Number(result.width)\"\n          :original-image-height=\"Number(result.height)\"\n          :title=\"result.title\"\n          :src=\"result.thumbnail_url\"\n          :width=\"imageWidth\"\n          :aspect-ratio=\"result.width / result.height\"\n          :process-image=\"isShowingAiImages\"\n          @error=\"handleImageError(result.thumbnail_url)\"\n        />\n        <img\n          v-else\n          class=\"rounded-2xl\"\n          :alt=\"result.title\"\n          loading=\"lazy\"\n          :src=\"result.thumbnail_url\"\n          @error=\"handleImageError(result.thumbnail_url)\"\n        />\n        <span v-if=\"!isShowingAiImages\">\n          <div v-if=\"result.attribution_link\" class=\"mx-2\">\n            <div class=\"mt-1.5 mb-0.5\">\n              <div v-if=\"providerName(result) === 'Unsplash'\" class=\"text-12-15 text-highway-200 dark:text-white-200\">\n                {{ __('%{imageAuthorName} on Unsplash', { imageAuthorName: result.title }) }}\n              </div>\n              <div v-else class=\"mt-1 text-12-15 text-highway-200 dark:text-white-200 truncate\" :title=\"result.title\">\n                {{ result.title }}\n              </div>\n            </div>\n            <div class=\"flex flex-row text-12-15 mt-0.5 ss01-nums text-highway-200 dark:text-white-200 truncate\">\n              <a\n                :class=\"[\n                  'text-12-15',\n                  'font-semibold',\n                  'text-highway-200',\n                  'dark:text-white-200',\n                  'shrink-0',\n                  'hover-hover:hover:text-grape-500',\n                  'hover-hover:dark:hover:text-canary-500',\n                  'focus:text-grape-500',\n                  'hover-hover:dark:focus:text-canary-500',\n                  'rounded',\n                  'focus:ring-2',\n                  'focus:ring-hover',\n                ]\"\n                :href=\"result.attribution_link\"\n                target=\"_blank\"\n                :aria-label=\"__('Go to source of the image')\"\n                @click.stop=\"\"\n              >\n                {{ __('Source') }}\n              </a>\n            </div>\n          </div>\n          <div v-else class=\"mx-2\">\n            <div class=\"mt-1.5 text-12-15 text-highway-200 dark:text-white-200 truncate\">\n              {{ providerName(result) }}\n            </div>\n          </div>\n        </span>\n      </div>\n    </li>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport type { WebSearchResult } from '@@/bits/web_search'\nimport { nextTick, ref } from 'vue'\n\ndefineProps<{\n  results: WebSearchResult[]\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', url: string): void\n}>()\n\nconst hoveringOn = ref<number | null>(null)\n\nfunction onSelect(url: string) {\n  emit('select', url)\n}\n\nfunction onHover(index: number) {\n  nextTick(() => (hoveringOn.value = index))\n}\n\nfunction onStopHover() {\n  hoveringOn.value = null\n}\n</script>\n\n<template>\n  <ul :class=\"['grid', 'grid-cols-1', 'mx-0', '-mt-1', 'md:mt-0', 'md:pt-2']\">\n    <li\n      v-for=\"(result, index) in results\"\n      :key=\"'web-result-' + index\"\n      :class=\"['flex', 'flex-col', 'pt-0', 'pb-0', 'last:mb-2', 'px-0', 'relative']\"\n      @mouseenter.stop=\"onHover(index)\"\n      @mouseleave.stop=\"onStopHover\"\n      @focusin=\"onHover(index)\"\n      @focusout=\"onStopHover\"\n      @click=\"onSelect(result.url)\"\n      @keydown.enter=\"onSelect(result.url)\"\n      @keydown.space=\"onSelect(result.url)\"\n    >\n      <div\n        tabindex=\"0\"\n        :class=\"[\n          'rounded-xl',\n          'focus:ring-2',\n          'focus:ring-grape-500',\n          'dark:focus:ring-canary-500',\n          'focus:ring-opacity-100',\n          'hover-hover:hover:ring-2',\n          'hover-hover:hover:ring-grape-500',\n          'hover-hover:dark:hover:ring-canary-500',\n          'hover-hover:hover:ring-opacity-100',\n          'only:hide-separator',\n          'last:hide-separator',\n          'cursor-pointer',\n          'px-2',\n          'py-3',\n        ]\"\n      >\n        <div class=\"font-semibold text-17-22 text-highway-100 dark:text-white-100 mb-1\">{{ result.title }}</div>\n        <div class=\"font-normal text-body-extra-small leading-4 text-highway-100 dark:text-white-100 mb-1\">\n          {{ result.description }}\n        </div>\n        <div class=\"truncate font-normal text-12-15 mt-1 text-highway-200 dark:text-white-200\">{{ result.url }}</div>\n      </div>\n      <div\n        :class=\"[\n          'separator',\n          'border-solid',\n          'border-highway-disabled',\n          'dark:border-white-disabled',\n          'border-t',\n          'absolute',\n          'bottom-0',\n          'left-0',\n          'right-0',\n          hoveringOn === index || (hoveringOn != null && hoveringOn - 1 === index) ? 'hidden' : '',\n        ]\"\n      />\n    </li>\n  </ul>\n</template>\n","<template>\n  <a :href=\"href\" target=\"_blank\">\n    <processed-image\n      class=\"attribution-image\"\n      :src=\"src\"\n      :width=\"width\"\n      :height=\"height\"\n      :transforms=\"{ width, height }\"\n    />\n  </a>\n</template>\n\n<script>\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { attributionMap } from '@@/bits/web_search'\nimport ProcessedImage from '@@/vuecomponents/processed_image.vue'\n\nexport default {\n  components: { ProcessedImage },\n  props: {\n    provider: {\n      type: String,\n      required: true,\n    },\n  },\n  computed: {\n    href() {\n      return attributionMap[this.provider].href\n    },\n    src() {\n      return attributionMap[this.provider].src\n    },\n    width() {\n      return attributionMap[this.provider].width\n    },\n    height() {\n      return attributionMap[this.provider].height\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.attribution-image {\n  display: block;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport device from '@@/bits/device'\nimport { emojiUrl } from '@@/bits/emoji'\nimport { observeElementIntersection } from '@@/bits/intersection'\nimport { __ } from '@@/bits/intl'\nimport type {\n  AiImageSearchResult,\n  AudioSearchResult,\n  ImageSearchResult,\n  VideoSearchResult,\n  WebSearchResult,\n} from '@@/bits/web_search'\nimport { SearchFilters } from '@@/bits/web_search'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport OzIndeterminateSpinner from '@@/library/v4/components/OzIndeterminateSpinner.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport ContentPickerSearchResultsAv from '@@/vuecomponents/ContentPickerSearchResultsAv.vue'\nimport ContentPickerSearchResultsImage from '@@/vuecomponents/ContentPickerSearchResultsImage.vue'\nimport ContentPickerSearchResultsWeb from '@@/vuecomponents/content-picker-search-results-web.vue'\nimport WebBrowserAttribution from '@@/vuecomponents/web_browser_attribution.vue'\nimport { processedUrl } from '@padlet/vivaldi-client'\nimport { storeToRefs } from 'pinia'\nimport { nextTick, onUnmounted, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  isOnline: boolean\n  searchQuery: string\n  searchFilter: SearchFilters | null\n  results: (AudioSearchResult | WebSearchResult | VideoSearchResult | ImageSearchResult | AiImageSearchResult)[]\n  isSearchQueryInProgress: boolean\n  isSearchMoreQueryInProgress: boolean\n  isAiImageSearchMode: boolean\n  canSearchMore: boolean\n  hasError: boolean\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', data: string): void\n  (name: 'search-more'): void\n  (name: 'clear-search-error'): void\n}>()\n\n// From JoyPixels\nconst EMOJIS = {\n  '1f626': {\n    code: '1f626',\n    category: 'people',\n    shortname: ':frowning:',\n    name: 'frowning face with open mouth',\n    keywords: ['face', 'frown', 'mouth', 'open'],\n    url: emojiUrl('png', '1f626'),\n  },\n  '1f633': {\n    code: '1f633',\n    category: 'people',\n    shortname: ':flushed:',\n    name: 'flushed face',\n    keywords: ['dazed', 'face', 'flushed'],\n    url: emojiUrl('png', '1f633'),\n  },\n  '1f634': {\n    code: '1f634',\n    category: 'people',\n    shortname: ':sleeping:',\n    name: 'sleeping face',\n    keywords: ['face', 'sleep', 'zzz'],\n    url: emojiUrl('png', '1f634'),\n  },\n}\n\nconst isMobile = device.mobile\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\n\nconst resultBody = ref<HTMLDivElement | null>(null)\n\nconst hasNoResults = ref<boolean>(false)\nconst intersectionObserver = ref<IntersectionObserver | null>(null)\n\nconst processedIconUrl = (icon: object & { url: string }): string => {\n  return processedUrl(icon.url, { width: 64, height: 64, preset: 'icon' })\n}\n\nconst select = (data: string): void => {\n  if (props.isAiImageSearchMode) {\n    trackEvent('AI Image Search', 'Selected image from AI search')\n  }\n  emit('select', data)\n}\n\nwatch(\n  () => props.results,\n  (): void => {\n    nextTick(() => {\n      // necessary to wait for the element to appear\n      const searchMoreTrigger = document.querySelector('#search-more-trigger') as HTMLDivElement\n      if (searchMoreTrigger) {\n        intersectionObserver.value = observeElementIntersection(searchMoreTrigger, () => {\n          emit('search-more')\n        })\n      }\n    })\n  },\n)\n\nwatch([() => props.isSearchQueryInProgress, () => props.searchFilter], (): void => {\n  let xResults = true\n  if (props.searchQuery) {\n    xResults = props.results && props.results.length > 0\n  }\n  hasNoResults.value = !xResults\n})\n\nwatch(\n  () => props.searchFilter,\n  (): void => {\n    if (!resultBody.value) return\n    resultBody.value.scrollTop = 0\n  },\n)\n\nwatch(\n  () => props.isOnline,\n  (): void => {\n    emit('clear-search-error')\n  },\n)\n\nonUnmounted(() => {\n  const searchMoreTrigger = document.querySelector('#search-more-trigger') as HTMLDivElement\n  if (intersectionObserver.value !== null && searchMoreTrigger) {\n    intersectionObserver.value.unobserve(searchMoreTrigger)\n  }\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'relative flex grow flex-col overflow-hidden',\n      isAiImageSearchMode && !isMobile ? 'h-auto pb-2' : 'h-full',\n    ]\"\n  >\n    <div v-if=\"isSearchQueryInProgress\" :class=\"[!isAiImageSearchMode && 'mt-2']\">\n      <div\n        v-if=\"isAiImageSearchMode\"\n        class=\"h-109 my-0.5 text-dark-text-100 dark:text-light-text-100 flex flex-col items-center justify-center pb-8\"\n      >\n        <div class=\"pb-4\"><OzIndeterminateSpinner :size=\"48\" /></div>\n        <p class=\"text-input-body-small\"><strong>Drawing your words...</strong></p>\n        <p class=\"text-body-extra-small\">This may take up to a minute</p>\n      </div>\n      <OzIndeterminateSpinner v-else class=\"mx-auto\" :size=\"32\" />\n    </div>\n    <div\n      v-else-if=\"isAiImageSearchMode && hasError && isOnline\"\n      class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n    >\n      <p class=\"pb-4\">\n        <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f633'])\" :alt=\"EMOJIS['1f634'].name\" />\n      </p>\n      <p class=\"text-center\">{{ __(\"Sorry! Looks like we can't draw that either.\") }}</p>\n    </div>\n    <div\n      v-else-if=\"hasNoResults && isOnline\"\n      class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n    >\n      <p class=\"pb-4\">\n        <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f626'])\" :alt=\"EMOJIS['1f634'].name\" />\n      </p>\n      <p class=\"text-center\">{{ __('No results found for your search term.') }}</p>\n      <p class=\"text-center\">{{ __('Hope you find what you are looking for!') }}</p>\n    </div>\n    <div\n      v-else-if=\"results\"\n      ref=\"resultBody\"\n      :class=\"['overflow-auto', 'px-4', 'scrollbar-regular', 'dark:scrollbar-regular-dark']\"\n    >\n      <div v-if=\"searchFilter === SearchFilters.Gif\" class=\"flex flex-1 items-center justify-center\" role=\"note\">\n        <web-browser-attribution\n          :aria-label=\"__('Powered By GIPHY')\"\n          :provider=\"isDarkMode ? 'giphyWhite' : 'giphyBlack'\"\n        />\n      </div>\n      <ContentPickerSearchResultsWeb v-if=\"searchFilter == SearchFilters.Web\" :results=\"results\" @select=\"select\" />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.Images\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.UnsplashImages\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.AiImages\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.Gif\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.Stock\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsAv\n        v-else-if=\"searchFilter === SearchFilters.Audio\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsAv\n        v-else-if=\"searchFilter === SearchFilters.Videos\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <transition name=\"fade\">\n        <div v-if=\"isSearchMoreQueryInProgress\" class=\"absolute bottom-2 inset-x-0 my-2 flex justify-center\">\n          <div class=\"bg-modal-light dark:bg-dark-ui-300 p-2 rounded-xl shadow-xl animate-bounce\">\n            <OzIndeterminateSpinner :size=\"24\" />\n          </div>\n        </div>\n      </transition>\n      <div v-if=\"canSearchMore && isOnline\" id=\"search-more-trigger\" class=\"flex justify-center mt-4 mb-8 h-12\">\n        <OzContainedButton\n          v-show=\"!isSearchMoreQueryInProgress\"\n          :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n          :size-preset=\"OzContainedButtonSizePreset.H32px\"\n          class=\"relative mx-auto mt-4\"\n          :text=\"__('Load more')\"\n          @click=\"$emit('search-more')\"\n        />\n      </div>\n    </div>\n    <transition name=\"fade\">\n      <div\n        v-if=\"!isSearchQueryInProgress && !hasNoResults && hasError && isOnline\"\n        class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n      >\n        <p class=\"pb-4\">\n          <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f633'])\" :alt=\"EMOJIS['1f634'].name\" />\n        </p>\n        <p class=\"text-center\">{{ __('Oops! Something went wrong.') }}</p>\n        <p class=\"text-center\">{{ __('Please try again.') }}</p>\n      </div>\n    </transition>\n    <transition name=\"fade\">\n      <!-- N.B. If not online, we cannot load image, therefore\n      we use v-show instead of v-if to preload this part -->\n      <div\n        v-show=\"!isSearchQueryInProgress && !isOnline\"\n        class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n      >\n        <p class=\"pb-4\">\n          <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f634'])\" :alt=\"EMOJIS['1f634'].name\" />\n        </p>\n        <p class=\"text-center\">{{ __(\"You're offline.\") }}</p>\n        <p class=\"text-center\">{{ __('Please try again.') }}</p>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.25s;\n}\n.fade-enter,\n.fade-leave-to {\n  transition: none;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport type { ChicletBackgroundColor } from '@@/bits/chiclet_color'\nimport OzAvatar from '@@/library/v4/components/OzAvatar.vue'\nimport OzBadge, { OzBadgeColorScheme } from '@@/library/v4/components/OzBadge.vue'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    iconName?: string\n    iconStrokeWidth?: number\n    color?: ChicletBackgroundColor\n    disabled?: boolean\n    avatarUrl?: string\n    avatarAltText?: string\n    xNewBadge?: boolean\n    text?: string\n    subtext?: string\n  }>(),\n  {\n    iconName: '',\n    iconStrokeWidth: undefined,\n    color: 'green',\n    disabled: false,\n    avatarUrl: '',\n    avatarAltText: '',\n    xNewBadge: false,\n    text: '',\n    subtext: '',\n  },\n)\ndefineEmits<{\n  (name: 'click', event: MouseEvent): void\n}>()\n\nconst iconStrokeWidthStyle = computed(() =>\n  props.iconStrokeWidth ? { '-webkit-text-stroke-width': `${props.iconStrokeWidth}px` } : {},\n)\n\nconst iconColorClasses = computed(() => {\n  switch (props.color) {\n    case 'green':\n      return ['text-park']\n    case 'orange':\n      return ['text-tangerine']\n    case 'pink':\n      return ['text-padlet-pink']\n    case 'blue':\n      return ['text-oceanic']\n    case 'purple':\n      return ['text-grape']\n    case 'teal':\n      return ['text-teal']\n    default:\n      return []\n  }\n})\n</script>\n\n<template>\n  <OzBaseButton\n    :class=\"[\n      'relative',\n      'flex',\n      'items-center',\n      'text-dark-text-100',\n      'dark:text-light-text-100',\n      'py-3 @tablet-portrait/surface-container:py-2 tablet-portrait:-@:py-2',\n      'ps-3 pe-0',\n\n      // Background\n      'dark:bg-dark-ui-200',\n      color === 'green' && ['bg-park-0'],\n      color === 'orange' && ['bg-tangerine-0'],\n      color === 'pink' && ['bg-padlet-pink-0'],\n      color === 'blue' && ['bg-oceanic-0'],\n      color === 'purple' && ['bg-grape-0'],\n      color === 'teal' && ['bg-teal-0'],\n\n      // Interaction\n      !disabled && [\n        'transition-all',\n\n        // Animation\n        'hhover:animate-pulse-bg-color',\n        'hactive:animate-none',\n        'focus-visible:animate-none',\n        'dark:pulse-bg-from-dark-ui-200',\n        'dark:pulse-bg-to-dark-ui-300',\n\n        // Hover/Focus/Active\n        'hactive:text-dark-text-100',\n        'hactive:dark:bg-dark-ui-300',\n        'hactive:dark:text-light-text-100',\n        'focus-visible:dark:bg-dark-ui-300',\n        'dark:active:bg-dark-ui-300',\n        'dark:active:text-light-text-100',\n        'dark:focus-visible:bg-dark-ui-300',\n        'active:text-dark-text-100',\n\n        // Focus ring\n        '@tablet-portrait/surface-container:focus-visible:ring-[2.5px] tablet-portrait:-@:focus-visible:ring-[2.5px]',\n        '@tablet-portrait/surface-container:ring-offset-[1.5px] tablet-portrait:-@:ring-offset-[1.5px]',\n        'dark:ring-offset-grey-900 ring-offset-white',\n        'ring-grape-500 dark:ring-canary-500',\n\n        color === 'green' && [\n          'focus-visible:bg-park-200',\n          'hactive:bg-park-200',\n          'pulse-bg-from-park-0 pulse-bg-to-park-200',\n        ],\n        color === 'orange' && [\n          'focus-visible:bg-tangerine-100',\n          'hactive:bg-tangerine-100',\n          'pulse-bg-from-tangerine-0 pulse-bg-to-tangerine-200',\n        ],\n        color === 'pink' && [\n          'focus-visible:bg-padlet-pink-100',\n          'hactive:bg-padlet-pink-100',\n          'pulse-bg-from-padlet-pink-0 pulse-bg-to-padlet-pink-200',\n        ],\n        color === 'blue' && [\n          'focus-visible:bg-oceanic-100',\n          'hactive:bg-oceanic-100',\n          'pulse-bg-from-oceanic-0 pulse-bg-to-oceanic-200',\n        ],\n        color === 'purple' && [\n          'focus-visible:bg-grape-100',\n          'hactive:bg-grape-100',\n          'pulse-bg-from-grape-0 pulse-bg-to-grape-200',\n        ],\n        color === 'teal' && [\n          'focus-visible:bg-teal-100',\n          'hactive:bg-teal-100',\n          'pulse-bg-from-teal-0 pulse-bg-to-teal-200',\n        ],\n      ],\n    ]\"\n    @click=\"$emit('click', $event)\"\n  >\n    <OzIcon\n      v-if=\"iconName\"\n      :size=\"24\"\n      :class=\"['shrink-0', iconColorClasses]\"\n      :name=\"iconName\"\n      :style=\"iconStrokeWidthStyle\"\n    />\n    <OzAvatar\n      v-else-if=\"avatarUrl\"\n      :height=\"24\"\n      :width=\"24\"\n      :src=\"avatarUrl\"\n      :alt-text-name=\"avatarAltText\"\n      :class=\"['shrink-0 rounded-full', iconColorClasses]\"\n    />\n\n    <span\n      :class=\"[\n        'mx-3 text-body-posts @tablet-portrait/surface-container:text-body-small tablet-portrait:-@:text-body-small text-start truncate grow',\n        subtext && 'max-w-[60%] shrink-0',\n      ]\"\n      >{{ text }}</span\n    >\n\n    <span v-if=\"subtext\" class=\"ms-auto me-4 text-body-small text-dark-text-200 dark:text-light-text-200 truncate\">{{\n      subtext\n    }}</span>\n    <OzBadge\n      v-if=\"xNewBadge\"\n      :text=\"__('New')\"\n      :color-scheme=\"OzBadgeColorScheme.Bare\"\n      :class=\"[\n        'text-light-text-100',\n        'bg-park-500 dark:bg-park-800',\n        'me-4 @tablet-portrait/surface-container:me-2.5 tablet-portrait:-@:me-2.5',\n        'px-1.5 h-5',\n        'rounded-md',\n      ]\"\n    />\n  </OzBaseButton>\n</template>\n","<script setup lang=\"ts\">\nimport type { ContentPickerSourceMenuListItem } from '@@/bits/content_picker'\nimport { ContentPickerSource } from '@@/bits/content_picker'\nimport device from '@@/bits/device'\nimport { __ } from '@@/bits/intl'\nimport type { SearchFilters } from '@@/bits/web_search'\nimport ChicletButton from '@@/vuecomponents/ChicletButton.vue'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    menuList: Array<Array<ContentPickerSourceMenuListItem>>\n    clipboardText: string\n    xClipboardButton: boolean\n    isPhoneScreen: boolean\n    isDisabledOnDrag?: boolean\n  }>(),\n  {\n    isDisabledOnDrag: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'paste-text'): void\n  (name: 'focus-search-bar', payload: SearchFilters): void\n  (name: 'select-default', payload: string): void\n  (name: 'select', payload: ContentPickerSource): void\n  (name: 'trigger-link-input'): void\n  (name: 'trigger-ai-image-search'): void\n}>()\n\nconst displayedSourceMenuLists = computed<Array<Array<ContentPickerSourceMenuListItem>>>(() => {\n  const visibleItemLists = props.menuList\n    .map((list) => list.filter((item) => item.visible))\n    .filter((list) => list.length > 0)\n  const displayedLists: Array<Array<ContentPickerSourceMenuListItem>> = []\n\n  // If 2 adjacent lists have less than or equal to 3 items, we group them together\n  let i = 0\n  let bucket: ContentPickerSourceMenuListItem[] = []\n  while (i < visibleItemLists.length) {\n    bucket.push(...visibleItemLists[i])\n    if (bucket.length >= 3) {\n      displayedLists.push(bucket)\n      bucket = []\n    }\n    i++\n  }\n  if (bucket.length > 0) displayedLists.push(bucket)\n\n  // If total items count is less than or equal to 9, we group all lists together\n  const itemsCount = displayedLists.reduce((count, list) => count + list.length, 0)\n  return itemsCount <= 9 ? [displayedLists.flat()] : displayedLists\n})\n\n// Triggers <input file> element and use camera directly\nconst triggerNativeInputWithCamera = (id: string): void => {\n  const input = document.getElementById(id)\n  if (input) {\n    input.setAttribute('capture', 'environment')\n    input.click()\n    input.removeAttribute('capture')\n  }\n}\n\nconst onClick = (item: ContentPickerSourceMenuListItem) => {\n  if (item.hiddenInputId) {\n    if (\n      device.mobile &&\n      item.type !== ContentPickerSource.FileBrowser // For file browser, don't open camera\n    ) {\n      triggerNativeInputWithCamera(item.hiddenInputId)\n    } else {\n      document.getElementById(item.hiddenInputId)?.click()\n    }\n  }\n\n  emit(item.actionType as any, item.actionPayload as any)\n}\n</script>\n\n<template>\n  <div class=\"pb-4 px-4 mt-0 @tablet-portrait/surface-container:mt-3 tablet-portrait:-@:mt-3\">\n    <div\n      v-if=\"isPhoneScreen && xClipboardButton\"\n      :class=\"[\n        'grid grid-flow-row',\n        'grid-cols-1 @tablet-portrait/surface-container:grid-cols-3 tablet-portrait:-@:grid-cols-3',\n        'gap-0 @tablet-portrait/surface-container:gap-3 tablet-portrait:-@:gap-3',\n        'mb-4',\n      ]\"\n    >\n      <ChicletButton\n        :class=\"['rounded-2.5xl @tablet-portrait/surface-container:rounded-xl tablet-portrait:-@:rounded-xl']\"\n        :disabled=\"isDisabledOnDrag\"\n        color=\"pink\"\n        icon-name=\"clipboard_outline\"\n        :aria-label=\"__('Paste from clipboard. Your clipboard text is: %{clipboardText}', { clipboardText })\"\n        :text=\"__('Clipboard')\"\n        :subtext=\"clipboardText\"\n        @click=\"$emit('paste-text')\"\n      />\n    </div>\n\n    <div\n      v-for=\"(list, index) in displayedSourceMenuLists\"\n      :key=\"index\"\n      :class=\"[\n        'grid grid-flow-row',\n        'grid-cols-1 @tablet-portrait/surface-container:grid-cols-3 tablet-portrait:-@:grid-cols-3',\n        'gap-0 @tablet-portrait/surface-container:gap-3 tablet-portrait:-@:gap-3',\n        {\n          'mt-4 @tablet-portrait/surface-container:mt-6 tablet-portrait:-@:mt-6': index > 0,\n        },\n      ]\"\n    >\n      <template v-for=\"(item, itemIndex) in list\">\n        <ChicletButton\n          :key=\"item.text\"\n          :class=\"[\n            'first:rounded-t-2.5xl @tablet-portrait/surface-container:first:rounded-t-xl tablet-portrait:-@:first:rounded-t-xl',\n            'last:rounded-b-2.5xl @tablet-portrait/surface-container:last:rounded-b-xl tablet-portrait:-@:last:rounded-b-xl',\n            '@tablet-portrait/surface-container:rounded-xl tablet-portrait:-@:rounded-xl',\n            isPhoneScreen && itemIndex < list.length - 1 && 'horizontal-bottom-separator',\n          ]\"\n          :aria-label=\"item.ariaLabel\"\n          :disabled=\"item.disabled && isDisabledOnDrag\"\n          :hidden-input-id=\"item.hiddenInputId\"\n          :color=\"item.color\"\n          :icon-name=\"item.icon\"\n          :icon-stroke-width=\"item.iconStrokeWidth\"\n          :avatar-url=\"item.avatarUrl\"\n          :avatar-alt-text=\"item.avatarAltText\"\n          :x-new-badge=\"item.isNew\"\n          :data-testid=\"item.testId\"\n          :text=\"item.text\"\n          @click=\"() => onClick(item)\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.horizontal-bottom-separator::after {\n  @apply bg-highway-disabled dark:bg-white-disabled;\n  @apply absolute bottom-0 start-12 end-4;\n  @apply h-[0.5px];\n  @apply content-[\"\"];\n}\n</style>\n","<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport { getTextFromClipboard, supportReadFromClipboardAPI } from '@@/bits/clipboard'\nimport type { ContentPickerSource, ContentPickerSourceMenuListItem, NoSearchFilterError } from '@@/bits/content_picker'\nimport { dir } from '@@/bits/current_dir'\nimport device from '@@/bits/device'\nimport { getNearestScrollingElement } from '@@/bits/dom'\nimport { __ } from '@@/bits/intl'\nimport { SearchFilters } from '@@/bits/web_search'\nimport OzCloseButton from '@@/library/v4/components/OzCloseButton.vue'\nimport OzScreenSizeAwareCenterModal from '@@/library/v4/components/OzScreenSizeAwareCenterModal.vue'\nimport { useContentPickerStore, type ContentPickerSearchMode } from '@@/pinia/content_picker'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport AiImageSearchSample from '@@/vuecomponents/AiImageSearchSample.vue'\nimport ContentPickerSearchBar from '@@/vuecomponents/ContentPickerSearchBar.vue'\nimport ContentPickerSearchModes from '@@/vuecomponents/ContentPickerSearchModes.vue'\nimport ContentPickerSearchResults from '@@/vuecomponents/ContentPickerSearchResults.vue'\nimport ContentPickerSearchSuggestions from '@@/vuecomponents/ContentPickerSearchSuggestions.vue'\nimport ContentPickerSourceMenuList from '@@/vuecomponents/ContentPickerSourceMenuList.vue'\nimport { storeToRefs } from 'pinia'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isOnline: boolean\n    menuList: Array<Array<ContentPickerSourceMenuListItem>>\n    preferredTrayStartHeight: number\n    searchSuggestions?: string[]\n    searchModes?: ContentPickerSearchMode[]\n    defaultSearchMode?: SearchFilters\n    /**\n     * Whether or not the search bar can accept a link (addding a link directly from the search bar).\n     * If this is `false`, the search bar will always search the input text.\n     */\n    canAcceptLinkInSearchBar?: boolean\n    minHeight?: number\n    xSearchBar?: boolean\n    shouldForceFullSize?: boolean\n  }>(),\n  {\n    minHeight: undefined,\n    xSearchBar: true,\n    shouldForceFullSize: false,\n    searchSuggestions: undefined,\n    searchModes: undefined,\n    defaultSearchMode: undefined,\n    canAcceptLinkInSearchBar: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'close'): void\n  (name: 'select', source: ContentPickerSource): void\n  (name: 'select-link', url: string, payload?: { altText: string }): void\n}>()\n\nconst isSafari = device.safari\nconst isTouchable = device.touchable\n\nconst CLIPBOARD_ITEM_HEIGHT = 60 // clipboard's height is 48px and it's margin is 12px\nconst DEFAULT_SEARCH_MODES_TABS = {\n  [SearchFilters.Images]: { key: SearchFilters.Images, ref: 'imagesButton', text: __('Images') },\n  [SearchFilters.Gif]: { key: SearchFilters.Gif, ref: 'gifButton', text: __('GIF') },\n  [SearchFilters.Videos]: { key: SearchFilters.Videos, ref: 'youtubeButton', text: __('YouTube') },\n  [SearchFilters.Audio]: { key: SearchFilters.Audio, ref: 'spotifyButton', text: __('Spotify') },\n  [SearchFilters.Web]: { key: SearchFilters.Web, ref: 'webButton', text: __('Web') },\n}\n\nconst { isSmallerThanTabletPortrait, windowHeight } = storeToRefs(useWindowSizeStore())\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\n\nconst contentPickerStore = useContentPickerStore()\nconst {\n  searchFilter,\n  xSearchScreen,\n  isOpenedFromSearch,\n  xSearchSuggestions,\n  isLinkInputMode,\n  isAiImageSearchMode,\n  xAiImageResults,\n  xAiImagePreview,\n  searchQuery,\n  currentSearchResultsMap,\n  isSearchQueryInProgress,\n  isSearchMoreQueryInProgress,\n  isError,\n  currentSearchResultsForFilter,\n  currentSearchMoreUrlForFilter,\n  searchSuggestions,\n  isImageSearchMode,\n} = storeToRefs(contentPickerStore)\nconst {\n  syncSearchSuggestionsWithStorage,\n  pickSearchFilter,\n  openSearch,\n  closeSearch,\n  setSearchQuery,\n  startLinkInputMode,\n  endLinkInputMode,\n  openAiImagePreview,\n  closeAiImageSearchMode,\n  reopenAiImagePreview,\n  search,\n  clearSearchError,\n  searchMore,\n} = contentPickerStore\n\nconst searchBarRef = ref<InstanceType<typeof ContentPickerSearchBar> | null>(null)\nconst searchModesRef = ref<InstanceType<typeof ContentPickerSearchModes> | null>(null)\n\nconst currentClipboardText = ref<string>('')\nconst searchFocused = ref<boolean>(false)\nconst isExpanded = ref<boolean>(false)\nconst shouldWiggleSearchBar = ref<boolean>(false)\n\nconst clipboardEnabled = computed<boolean>(() => {\n  return (\n    supportReadFromClipboardAPI &&\n    !device.safari && // Safari handles clipboard API weirdly so we don't use that at all\n    !device.androidApp // Disabling for now until we can find a way to accept clipboard permissions in android webview\n  )\n})\n\nconst xClipboardButton = ref<boolean>(clipboardEnabled.value)\n\n// SEARCH MODES\n\nconst currentSearchModes = computed((): ContentPickerSearchMode[] => {\n  if (props.searchModes) {\n    return props.searchModes\n  }\n\n  const buttons: ContentPickerSearchMode[] = []\n  const flatMenulist: ContentPickerSourceMenuListItem[] = props.menuList.flatMap((innerMenuList) => innerMenuList)\n\n  for (const item of flatMenulist) {\n    if (Object.keys(DEFAULT_SEARCH_MODES_TABS).includes(item.type)) {\n      buttons.push(DEFAULT_SEARCH_MODES_TABS[item.type])\n    }\n  }\n\n  return buttons\n})\nconst defaultSearchMode = computed((): SearchFilters => {\n  if (props.defaultSearchMode) {\n    return props.defaultSearchMode\n  }\n\n  const searchFilters = currentSearchModes.value.map((button) => button.key) as SearchFilters[]\n  return searchFilters.includes(SearchFilters.Web) ? SearchFilters.Web : searchFilters[0]\n})\n\n// DIALOG\n\nconst closeMenu = (): void => {\n  emit('close')\n}\n\nconst handleScrimClick = (): void => {\n  // Ignore scrim clicking for iPad\n  if (searchFocused.value && isTouchable) return\n  closeMenu()\n}\n\nconst menuListDisabled = ref<boolean>(false)\n\nconst handleDragStart = (): void => {\n  menuListDisabled.value = true\n}\n\nconst handleDragEnd = (): void => {\n  menuListDisabled.value = false\n}\n\n// GREEN BUTTONS\n\nconst selectSource = (source: ContentPickerSource): void => {\n  trackEvent('Content Picker', `Selected ${source}`)\n  endLinkInputMode()\n  shouldWiggleSearchBar.value = false\n  emit('select', source)\n}\n\nconst selectSearchResult = (url: string): void => {\n  trackEvent('Content Picker', 'Selected search result')\n\n  if (isImageSearchMode.value) {\n    // only set altText if we are picking images.\n    emit('select-link', url, { altText: searchQuery.value })\n  } else {\n    emit('select-link', url)\n  }\n\n  emit('close')\n}\n\nconst selectDefault = (url: string): void => {\n  trackEvent('Content Picker', 'Selected Default')\n  emit('select-link', url)\n}\n\n// CLIPBOARD\n\nconst syncClipboardText = async (): Promise<void> => {\n  try {\n    if (!isSafari && supportReadFromClipboardAPI) {\n      currentClipboardText.value = await getTextFromClipboard()\n      xClipboardButton.value =\n        clipboardEnabled.value && !!currentClipboardText.value && currentClipboardText.value.trim().length > 0\n    }\n  } catch (e) {\n    // do nothing\n  }\n}\n\n// SEARCHBAR\n\nconst searchBarPlaceholder = computed((): string => {\n  if (isLinkInputMode.value) {\n    return __('Paste or type link here')\n  }\n  if (isAiImageSearchMode.value) {\n    return __('Write what you want to draw')\n  }\n  if (props.canAcceptLinkInSearchBar) {\n    return __('Search web or paste URL')\n  }\n  return __('Search web')\n})\n\nconst xBackButton = computed((): boolean => {\n  return (\n    (xSearchScreen.value && !isOpenedFromSearch.value) || (xAiImagePreview.value && currentSearchModes.value.length > 0)\n  )\n})\n\nconst focusSearchBar = (): void => {\n  endLinkInputMode()\n  nextTick(() => {\n    if (!searchBarRef.value) return\n    searchBarRef.value.focusSearchBar()\n  })\n}\n\nconst contentPickerBodyRef = ref<HTMLElement>()\n\n// Clicking on a orange button will go to search menu with the appropriate filter\n// Clicking on clipboard will paste text and go to search menu\nconst imitateSearchBarClickWithFilter = (filter: SearchFilters): void => {\n  // Track when image, gif, video, audio, or web search is selected in the content picker\n  trackEvent('Content picker', `Selected ${filter}`)\n  endLinkInputMode()\n  if (!isLinkInputMode.value) {\n    openSearch()\n    pickSearchFilter({ filter: filter || searchFilter.value || defaultSearchMode.value })\n    if (!contentPickerBodyRef.value) return\n    const elementInChargeOfScrolling = getNearestScrollingElement(contentPickerBodyRef.value)\n    if (!elementInChargeOfScrolling) return\n    elementInChargeOfScrolling.scrollTo({ top: 0 })\n  }\n  shouldWiggleSearchBar.value = false\n  focusSearchBar()\n}\n\nconst pasteText = async (): Promise<void> => {\n  try {\n    setSearchQuery({ query: (await getTextFromClipboard()).slice(0, 140) })\n    imitateSearchBarClickWithFilter(searchFilter.value || defaultSearchMode.value)\n  } catch (e) {\n    // Reference: https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/, search for \"Async Clipboard API\"\n    // Safari requires navigator.clipboard calls to be called within user gesture event handlers instead of a permissions-based model for reading from the clipboard\n    // When getTextFromClipboard is called programatically like this, Safari will show a small \"Paste\" button on the UI to confirm if the user allows pasting\n    // If they tap/click outside the button, Safari treat it as permission denied and throws a NotAllowedError => we can ignore it\n    if (isSafari && e.name === 'NotAllowedError') {\n      return\n    }\n    // throw unknown errors again so they will go to Sentry\n    throw e\n  }\n}\n\nconst handleSearchBarSearch = (query): void => {\n  if (isLinkInputMode.value) {\n    pickSearchFilter({ filter: SearchFilters.Web })\n  } else if (isAiImageSearchMode.value) {\n    pickSearchFilter({ filter: SearchFilters.AiImages })\n  }\n  search({ query })\n}\n\n// When user click on the searchbar, we open search menu and pre-pick the previous filter\n// or \"None\" filter to not pre-pick any.\nconst handleSearchBarClick = (): void => {\n  if (!isLinkInputMode.value && !isAiImageSearchMode.value) {\n    openSearch()\n    if (!searchFilter.value) {\n      pickSearchFilter({ filter: searchFilter.value || defaultSearchMode.value })\n    }\n  }\n  focusSearchBar()\n}\n\nconst handleSearchBarFocus = (): void => {\n  syncClipboardText()\n  searchFocused.value = true\n}\n\nconst handleSearchBarBlur = (): void => {\n  searchFocused.value = false\n}\n\nconst triggerLinkInput = (): void => {\n  startLinkInputMode()\n  focusSearchBar()\n  // wiggle the search bar again every time link input is triggered\n  shouldWiggleSearchBar.value = false\n  nextTick(() => setTimeout(() => (shouldWiggleSearchBar.value = true)))\n}\n\nconst triggerAiImageSearch = (): void => {\n  trackEvent('Content picker', 'Selected AI image search')\n  openAiImagePreview()\n  focusSearchBar()\n}\n\nconst goBack = (): void => {\n  closeSearch()\n  closeAiImageSearchMode()\n  setSearchQuery({ query: '' })\n  isExpanded.value = false\n}\n\nconst handleSearchBarError = (error: NoSearchFilterError): void => {\n  if (error && error === 'NO_SEARCH_FILTER') {\n    searchModesRef.value?.shake()\n  }\n}\n\n// SEARCH QUERYING\n\nconst clearSearch = (): void => {\n  if (isAiImageSearchMode.value) {\n    reopenAiImagePreview()\n  }\n  setSearchQuery({ query: '' })\n}\n\nconst filterSelected = (filter: string): void => {\n  trackEvent('Content Picker', `Selected ${filter}`)\n  openSearch()\n  pickSearchFilter({ filter: filter as SearchFilters })\n  if (!searchQuery.value || searchQuery.value.trim() === '') {\n    focusSearchBar()\n    return\n  }\n\n  if (!searchFilter.value) {\n    return\n  }\n\n  // Search immediately after clicking the filter\n  // if the results are not populated yet.\n  if (\n    !currentSearchResultsMap.value ||\n    !currentSearchResultsMap.value[searchFilter.value] ||\n    currentSearchResultsMap.value[searchFilter.value].length === 0\n  ) {\n    search()\n  }\n}\n\nconst suggestionSelected = (suggestion: string): void => {\n  setSearchQuery({ query: suggestion })\n  search()\n}\n\n// SEARCH RESULTS\n\nonMounted((): void => {\n  syncSearchSuggestionsWithStorage()\n  syncClipboardText()\n  document.addEventListener('visibilitychange', () => {\n    syncClipboardText()\n  })\n})\n\nwatch(\n  xSearchScreen,\n  (newVal: boolean) => {\n    if (newVal && !isAiImageSearchMode.value) {\n      if (isOpenedFromSearch.value) {\n        setTimeout(() => {\n          // Because we have an input field that needs focus, we delay the animation\n          // until after the keyboard is popped up\n          isExpanded.value = true\n        }, 250)\n      } else {\n        isExpanded.value = true\n      }\n    } else {\n      isExpanded.value = false\n    }\n  },\n  { immediate: true },\n)\n\n/**\n *  If search query is being typed/change, likely when clicking paste button\n *  we make sure search menu is always shown\n */\nwatch(searchQuery, (val) => {\n  if (!xSearchScreen.value && val && val.trim() !== '') {\n    imitateSearchBarClickWithFilter(searchFilter.value || defaultSearchMode.value)\n  }\n})\n</script>\n\n<template>\n  <OzScreenSizeAwareCenterModal\n    :dir=\"dir()\"\n    :is-phone=\"isSmallerThanTabletPortrait\"\n    :window-height=\"windowHeight\"\n    :class=\"['select-none', 'deep-font-sans', isDarkMode && 'dark-mode']\"\n    :width-class=\"isAiImageSearchMode ? 'w-135' : 'w-180'\"\n    :shadow-class=\"'shadow-elevation-4'\"\n    :disable-drag=\"xSearchScreen\"\n    :full-size=\"isExpanded || shouldForceFullSize\"\n    :preferred-tray-start-height=\"\n      xClipboardButton ? preferredTrayStartHeight + CLIPBOARD_ITEM_HEIGHT : preferredTrayStartHeight\n    \"\n    :min-height=\"minHeight\"\n    :x-scrim=\"true\"\n    @scrim-click=\"handleScrimClick\"\n    @scrim-esc=\"closeMenu\"\n    @dragstart=\"handleDragStart\"\n    @dragend=\"handleDragEnd\"\n  >\n    <template #header>\n      <ContentPickerSearchBar\n        v-if=\"xSearchBar\"\n        ref=\"searchBarRef\"\n        :x-back-button=\"xBackButton\"\n        :x-clipboard-button=\"xClipboardButton\"\n        :should-wiggle=\"shouldWiggleSearchBar\"\n        :should-force-focus-on-mount=\"isLinkInputMode\"\n        :submit-button-data-id=\"isAiImageSearchMode ? 'ai-image-search-trigger' : ''\"\n        :search-bar-placeholder=\"searchBarPlaceholder\"\n        :search-query=\"searchQuery\"\n        :can-accept-link=\"canAcceptLinkInSearchBar\"\n        @search=\"handleSearchBarSearch\"\n        @focus=\"handleSearchBarFocus\"\n        @blur=\"handleSearchBarBlur\"\n        @copy=\"syncClipboardText\"\n        @click=\"handleSearchBarClick\"\n        @clear-search=\"clearSearch\"\n        @select=\"selectSearchResult\"\n        @back=\"goBack\"\n        @paste-click=\"pasteText\"\n        @close=\"closeMenu\"\n        @error=\"handleSearchBarError\"\n        @input=\"(query) => setSearchQuery({ query })\"\n      />\n      <div v-else class=\"p-4\">\n        <OzCloseButton @click=\"closeMenu\" />\n      </div>\n    </template>\n    <template #body>\n      <div ref=\"contentPickerBodyRef\">\n        <AiImageSearchSample\n          v-if=\"xAiImagePreview\"\n          @run-sample-search=\"setSearchQuery({ query: $event.searchQuery })\"\n        />\n        <ContentPickerSearchResults\n          v-else-if=\"xAiImageResults && searchFilter\"\n          :is-online=\"isOnline\"\n          :search-query=\"searchQuery\"\n          :search-filter=\"searchFilter\"\n          :results=\"currentSearchResultsForFilter\"\n          :is-search-query-in-progress=\"isSearchQueryInProgress\"\n          :is-search-more-query-in-progress=\"isSearchMoreQueryInProgress\"\n          :is-ai-image-search-mode=\"isAiImageSearchMode\"\n          :can-search-more=\"!!currentSearchMoreUrlForFilter\"\n          :has-error=\"isError\"\n          @select=\"selectSearchResult\"\n          @search-more=\"searchMore\"\n          @clear-search-error=\"clearSearchError\"\n        />\n\n        <ContentPickerSourceMenuList\n          v-else-if=\"!xSearchScreen\"\n          :menu-list=\"menuList\"\n          :x-clipboard-button=\"xClipboardButton && xSearchBar\"\n          :clipboard-text=\"currentClipboardText\"\n          :is-disabled-on-drag=\"menuListDisabled\"\n          :is-phone-screen=\"isSmallerThanTabletPortrait\"\n          class=\"stroller\"\n          @select=\"selectSource\"\n          @select-default=\"selectDefault\"\n          @focus-search-bar=\"imitateSearchBarClickWithFilter\"\n          @paste-text=\"pasteText\"\n          @trigger-link-input=\"triggerLinkInput\"\n          @trigger-ai-image-search=\"triggerAiImageSearch\"\n        />\n        <template v-else>\n          <ContentPickerSearchModes\n            v-if=\"currentSearchModes.length > 1 && searchFilter\"\n            ref=\"searchModesRef\"\n            :class=\"xSearchSuggestions ? 'mb-4' : 'mb-2'\"\n            :search-modes=\"currentSearchModes\"\n            :current-search-filter=\"searchFilter\"\n            @filter-selected=\"filterSelected\"\n          />\n          <ContentPickerSearchSuggestions\n            v-if=\"xSearchSuggestions\"\n            :search-suggestions=\"props.searchSuggestions || searchSuggestions\"\n            @suggestion-selected=\"suggestionSelected\"\n          />\n          <ContentPickerSearchResults\n            v-else\n            :is-online=\"isOnline\"\n            :search-query=\"searchQuery\"\n            :search-filter=\"searchFilter\"\n            :results=\"currentSearchResultsForFilter\"\n            :is-search-query-in-progress=\"isSearchQueryInProgress\"\n            :is-search-more-query-in-progress=\"isSearchMoreQueryInProgress\"\n            :is-ai-image-search-mode=\"isAiImageSearchMode\"\n            :can-search-more=\"!!currentSearchMoreUrlForFilter\"\n            :has-error=\"isError\"\n            @select=\"selectSearchResult\"\n            @search-more=\"searchMore\"\n            @clear-search-error=\"clearSearchError\"\n          />\n        </template>\n      </div>\n    </template>\n  </OzScreenSizeAwareCenterModal>\n</template>\n\n<style lang=\"postcss\">\n.deep-font-sans {\n  * {\n    @apply font-sans;\n    @apply break-words;\n  }\n}\n</style>\n"],"names":["AI_SEARCH_SAMPLE","setSearchQuery","search","pickSearchFilter","useContentPickerStore","searchForSample","query","filter","SearchFilters","AiImages","emit","searchQuery","MAX_SEARCH_LENGTH","isPhone","storeToRefs","useWindowSizeStore","searchBar","ref","isSearchBarFocused","shouldShowClipboardButton","computed","props","xClipboardButton","value","device","safari","shouldShowSubmitButton","isShowingRightButton","handleCopyText","handleSearchBarFocus","onInput","event","target","select","data","unfocusForTouchDevices","touchable","blur","processQuery","canAcceptLink","isUrl","extractedUrl","extractUrl","handleSearchBarFocusOut","iphone","resetSearch","focus","focusSearchBar","handleEnter","preventDefault","onMounted","shouldForceFocusOnMount","expose","displayedSearchModes","searchModes","mode","visible","isShook","shake","setTimeout","FallbackAudio","LOADING_IMAGES_BG_COLOR","CROP_ASPECT_RATIO","DEFAULT_THUMBNAIL_HEIGHT","DEFAULT_THUMBNAIL_WIDTH","container","imageWrappers","imageWidth","handleResultsUpdate","nextTick","clientWidth","url","audioDescription","result","release_date","showName","show_name","Date","toLocaleDateString","shortenedDescription","description","split","slice","join","length","providerName","provider_name","getHostname","isUsingFallbackThumbnail","thumbnail_url","watch","results","erroredThumbnailUrls","Set","validResults","has","isShowingAiImages","selectWithBeacon","beaconLink","fetchJson","cors","handleImageError","erroredUrl","hoveringOn","onSelect","onHover","index","onStopHover","_sfc_main","components","ProcessedImage","provider","type","String","required","href","attributionMap","src","width","height","EMOJIS","code","category","shortname","name","keywords","emojiUrl","isMobile","mobile","isDarkMode","useDarkModeStore","resultBody","hasNoResults","intersectionObserver","processedIconUrl","icon","processedUrl","preset","isAiImageSearchMode","trackEvent","searchMoreTrigger","document","querySelector","observeElementIntersection","isSearchQueryInProgress","searchFilter","xResults","scrollTop","isOnline","onUnmounted","unobserve","iconStrokeWidthStyle","iconStrokeWidth","iconColorClasses","color","displayedSourceMenuLists","visibleItemLists","menuList","map","list","item","displayedLists","i","bucket","push","reduce","count","flat","triggerNativeInputWithCamera","id","input","getElementById","setAttribute","click","removeAttribute","hiddenInputId","ContentPickerSource","FileBrowser","actionType","actionPayload","isSafari","isTouchable","CLIPBOARD_ITEM_HEIGHT","DEFAULT_SEARCH_MODES_TABS","Images","key","text","__","Gif","Videos","Audio","Web","isSmallerThanTabletPortrait","windowHeight","contentPickerStore","xSearchScreen","isOpenedFromSearch","xSearchSuggestions","isLinkInputMode","xAiImageResults","xAiImagePreview","currentSearchResultsMap","isSearchMoreQueryInProgress","isError","currentSearchResultsForFilter","currentSearchMoreUrlForFilter","searchSuggestions","isImageSearchMode","syncSearchSuggestionsWithStorage","openSearch","closeSearch","startLinkInputMode","endLinkInputMode","openAiImagePreview","closeAiImageSearchMode","reopenAiImagePreview","clearSearchError","searchMore","searchBarRef","searchModesRef","currentClipboardText","searchFocused","isExpanded","shouldWiggleSearchBar","clipboardEnabled","supportReadFromClipboardAPI","androidApp","currentSearchModes","buttons","flatMenulist","flatMap","innerMenuList","Object","keys","includes","defaultSearchMode","searchFilters","button","closeMenu","handleScrimClick","menuListDisabled","handleDragStart","handleDragEnd","selectSource","source","selectSearchResult","altText","selectDefault","syncClipboardText","getTextFromClipboard","trim","searchBarPlaceholder","canAcceptLinkInSearchBar","xBackButton","contentPickerBodyRef","imitateSearchBarClickWithFilter","elementInChargeOfScrolling","getNearestScrollingElement","scrollTo","top","pasteText","e","handleSearchBarSearch","handleSearchBarClick","handleSearchBarBlur","triggerLinkInput","triggerAiImageSearch","goBack","handleSearchBarError","error","clearSearch","filterSelected","suggestionSelected","suggestion","addEventListener","newVal","immediate","val"],"mappings":"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"}