{"version":3,"mappings":";w2HAmBA,MAAMA,EAAqBC,EAAqB,UAAM,OAAO,kCAAyC,+UAAC,EACjGC,EAA0BD,EAC9B,UAAM,OAAO,uCAAsD,mCACrE,EACME,EAA0BF,EAC9B,UAAM,OAAO,uCAAsD,mCACrE,EAWMG,EAAqBC,IACrBC,EAAyBC,IAEzB,CAAEC,uCAAsC,EAAIC,EAAYC,IAA8B,EACtF,CACJC,sBACAC,cACAC,QACAC,aACAC,wBACAC,6BACAC,YACF,EAAIR,EAAYS,GAAA,CAAiB,EAC3B,CAAEC,eAAcC,oBAAmB,EAAIX,EAAYL,CAAkB,EACrE,CAAEiB,YAAW,EAAIZ,EAAYH,CAAsB,EACnD,CAAEgB,WAAYC,CAAgB,EAAId,EAAYe,GAAkB,EAEhEF,EAAaG,EAAS,IACtBjB,EAAsCkB,OAAS,CAACT,EAAWS,MAAcH,EAAgBG,MACtFb,EAAMa,MAAQd,EAAYc,QAAU,OAASf,EAAoBe,QAAU,MACnF,EAEKC,EAA0BF,EAC9B,IAAMV,EAAsBW,OAAS,CAACE,EAAkBF,OAASP,EAAaO,KAChF,EAEME,EAAoBH,EAAS,IAC1B,CAACjB,EAAsCkB,OAAST,EAAWS,KACnE,EAEKG,EAAsBJ,EAAS,IAAM,CACzC,IAAIK,EAAa,SACbC,EAAc,OAClB,OAAIH,EAAkBF,QAChBC,EAAwBD,OACZK,EAAA,OACDD,EAAA,SAECC,EAAA,MAEVC,EAAcN,MACHI,EAAA,OAEAA,EAAA,SAKZ,GAAGA,CAAU,IAAIC,CAAW,EACrC,CAAC,EAGKE,EAAkBC,EAAIb,EAAWK,KAAK,EAEtCM,EAAgBP,EAAS,IAAMQ,EAAgBP,MAAMS,OAAS,CAAC,EAE/DC,EAA+BA,IAAM,OACzCH,EAAgBP,MAAQ,IACxBW,IAASX,QAATW,QAAgBC,cAGZC,EAA0BA,IAAY,OAGtC,GAAAN,EAAgBP,MAAMS,OAAS,EAAG,CACpCF,EAAgBP,MAAQ,GACxB,MACF,CACAtB,EAAmBoC,iBAAiB,GACpCH,IAASX,QAATW,QAAgBI,aAIZC,EAA0BC,GAAS,IAAM,CAC7CrC,EAAuBsC,cAAcX,EAAgBP,MAAMmB,KAAM,IAChE,GAAG,EAENC,EAAMb,EAAiBS,CAAuB,EAC9CI,EAAMzB,EAAa0B,GAAmBd,EAAgBP,MAAQqB,EAAcF,MAAO,EAE7E,MAAAG,EAAmBC,GAAkC,CACzD9B,EAAaO,MAAQ,GACrBwB,EAAW,UAAW,2BAA2B,GAG7CC,EAAwBA,IAAM,CAClCrC,EAAWY,MAAQ,IAGf0B,EAAelB,IAEfmB,EAAsCJ,GAAkB,CAKvDG,EAAa1B,QACb0B,EAAa1B,MAAM4B,SAASL,EAAEM,aAA4B,IAC7DxC,EAAsBW,MAAQ,MAI5B8B,EAAeA,IAAM,OACzBzC,EAAsBW,MAAQ,IAC9BW,mBAAUX,QAAVW,QAAiBI,aAGbJ,EAAWH,2rBAEGuB,IAAM,QACxBpB,IAASX,QAATW,QAAgBoB,0BAGCnB,IAAM,QACvBD,IAASX,QAATW,QAAgBC","names":["SurfaceFilterModal","defineAsyncComponent","FilterIconWithIndicator","SearchIconWithIndicator","surfaceFilterStore","useSurfaceFilterStore","surfacePostSearchStore","useSurfacePostSearchStore","isContainerSmallerThanTabletLandscape","storeToRefs","useSurfaceContainerSizeStore","backgroundLuminance","colorScheme","isMap","xSearchBar","isSearchBarInEditMode","hasSidePanelOutsideSurface","isEmbedded","useSurfaceStore","xFilterModal","hasSelectedFilters","searchTerm","isDarkMode","browserDarkMode","useDarkModeStore","computed","value","shouldDisplayInEditMode","shouldDisplayFull","heightAndWidthClass","widthClass","heightClass","hasSearchTerm","localSearchTerm","ref","length","clearSearchTermAndFocusInput","inputRef","focusInput","handleSearchInputEscKey","resetPostFilters","blurInput","debouncedSyncSearchTerm","debounce","setSearchTerm","trim","watch","newSearchTerm","openFilterModal","e","trackEvent","applySearchAndFilters","searchBarRef","exitEditModeIfFocusTargetIsOutside","contains","relatedTarget","exitEditMode","selectInput"],"ignoreList":[],"sources":["../../../app/javascript/vuecomponents/SurfaceSearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport { defineAsyncComponent } from '@@/bits/vue'\nimport OzDivider, { OzDividerColorScheme, OzDividerOrientation } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzInput, { OzInputSizePreset } from '@@/library/v4/components/OzInput.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { useSurfaceStore } from '@@/pinia/surface'\nimport { useSurfaceContainerSizeStore } from '@@/pinia/surface_container_size'\nimport { useSurfaceFilterStore } from '@@/pinia/surface_filter'\nimport { useSurfacePostSearchStore } from '@@/pinia/surface_post_search'\nimport { debounce } from 'lodash-es'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref, watch } from 'vue'\n\nconst SurfaceFilterModal = defineAsyncComponent(() => import('@@/vuecomponents/SurfaceFilterModal.vue'))\nconst FilterIconWithIndicator = defineAsyncComponent(\n  () => import('@@/library/v4/components/FilterIconWithIndicator.vue'),\n)\nconst SearchIconWithIndicator = defineAsyncComponent(\n  () => import('@@/library/v4/components/SearchIconWithIndicator.vue'),\n)\n\nwithDefaults(\n  defineProps<{\n    shouldAnimateOnAppear?: boolean\n  }>(),\n  {\n    shouldAnimateOnAppear: false,\n  },\n)\n\nconst surfaceFilterStore = useSurfaceFilterStore()\nconst surfacePostSearchStore = useSurfacePostSearchStore()\n\nconst { isContainerSmallerThanTabletLandscape } = storeToRefs(useSurfaceContainerSizeStore())\nconst {\n  backgroundLuminance,\n  colorScheme,\n  isMap,\n  xSearchBar,\n  isSearchBarInEditMode,\n  hasSidePanelOutsideSurface,\n  isEmbedded,\n} = storeToRefs(useSurfaceStore())\nconst { xFilterModal, hasSelectedFilters } = storeToRefs(surfaceFilterStore)\nconst { searchTerm } = storeToRefs(surfacePostSearchStore)\nconst { isDarkMode: browserDarkMode } = storeToRefs(useDarkModeStore())\n\nconst isDarkMode = computed(() => {\n  if (isContainerSmallerThanTabletLandscape.value && !isEmbedded.value) return browserDarkMode.value\n  return isMap.value ? colorScheme.value === 'dark' : backgroundLuminance.value === 'dark'\n})\n\nconst shouldDisplayInEditMode = computed(\n  () => isSearchBarInEditMode.value || !shouldDisplayFull.value || xFilterModal.value,\n)\n\nconst shouldDisplayFull = computed(() => {\n  return !isContainerSmallerThanTabletLandscape.value || isEmbedded.value\n})\n\nconst heightAndWidthClass = computed(() => {\n  let widthClass = 'w-full'\n  let heightClass = 'h-13'\n  if (shouldDisplayFull.value) {\n    if (shouldDisplayInEditMode.value) {\n      heightClass = 'h-10'\n      widthClass = 'w-64'\n    } else {\n      heightClass = 'h-8'\n\n      if (hasSearchTerm.value) {\n        widthClass = 'w-64'\n      } else {\n        widthClass = 'w-18'\n      }\n    }\n  }\n\n  return `${widthClass} ${heightClass}`\n})\n// Use a local ref that's updated on every keystroke to avoid the delay in showing\n// the clear button (which is shown only when `hasSearchTerm` is true).\nconst localSearchTerm = ref(searchTerm.value)\n\nconst hasSearchTerm = computed(() => localSearchTerm.value.length > 0)\n\nconst clearSearchTermAndFocusInput = () => {\n  localSearchTerm.value = ''\n  inputRef.value?.focusInput()\n}\n\nconst handleSearchInputEscKey = (): void => {\n  // If there is a search term, we only want to clear it.\n  // If no more search term, we want to reset.\n  if (localSearchTerm.value.length > 0) {\n    localSearchTerm.value = ''\n    return\n  }\n  surfaceFilterStore.resetPostFilters()\n  inputRef.value?.blurInput()\n}\n\n// We still want to delay showing the search results so we debounce the sync here.\nconst debouncedSyncSearchTerm = debounce(() => {\n  surfacePostSearchStore.setSearchTerm(localSearchTerm.value.trim())\n}, 300)\n\nwatch(localSearchTerm, debouncedSyncSearchTerm)\nwatch(searchTerm, (newSearchTerm) => (localSearchTerm.value = newSearchTerm.trim()))\n\nconst openFilterModal = (e: MouseEvent | KeyboardEvent) => {\n  xFilterModal.value = true\n  trackEvent('Surface', 'Opened filter posts panel')\n}\n\nconst applySearchAndFilters = () => {\n  xSearchBar.value = false\n}\n\nconst searchBarRef = ref<HTMLDivElement>()\n\nconst exitEditModeIfFocusTargetIsOutside = (e: FocusEvent) => {\n  // When OzInput loses focus, we don't want to set `isSearchBarInEditMode` to `false` too early\n  // because it may be a Tab press to focus on the next buttons. To prevent this, we\n  // check `e.relatedTarget` to see if it's an element inside the search bar or not.\n  // If it's not, then we can safely set `isSearchBarInEditMode` to `false`.\n  if (!searchBarRef.value) return\n  if (!searchBarRef.value.contains(e.relatedTarget as Node | null)) {\n    isSearchBarInEditMode.value = false\n  }\n}\n\nconst exitEditMode = () => {\n  isSearchBarInEditMode.value = false\n  inputRef?.value?.blurInput()\n}\n\nconst inputRef = ref<InstanceType<typeof OzInput>>()\n\nconst selectInput = () => {\n  inputRef.value?.selectInput()\n}\n\nconst focusInput = () => {\n  inputRef.value?.focusInput()\n}\n</script>\n\n<template>\n  <Transition name=\"slide\" :appear=\"shouldAnimateOnAppear\" @after-appear=\"focusInput\">\n    <div\n      id=\"surface-search-bar\"\n      ref=\"searchBarRef\"\n      :data-mode=\"shouldDisplayInEditMode ? 'edit' : 'preview'\"\n      :class=\"[\n        'flex items-center justify-center',\n        'box-border',\n        // Transition\n        'transition-all motion-reduce:transition-none',\n        {\n          'duration-180': shouldDisplayInEditMode,\n          'duration-300': !shouldDisplayInEditMode,\n        },\n        'ease-in-out',\n        // Size\n        heightAndWidthClass,\n        shouldDisplayFull ? 'px-0' : 'ps-4 pe-2',\n        // Background\n        shouldDisplayFull ? 'bg-transparent dark:bg-transparent' : 'bg-light-ui-100 dark:bg-dark-ui-100',\n        // Cursor\n        {\n          'cursor-text': shouldDisplayFull && shouldDisplayInEditMode,\n          'search-bar-cursor-pointer': !shouldDisplayInEditMode,\n        },\n        hasSidePanelOutsideSurface && !shouldDisplayFull && 'absolute',\n        xFilterModal && 'z-sidepanel',\n      ]\"\n      data-pepin-id=\"surface-search-bar\"\n      data-pepin-trigger=\"click\"\n      data-testid=\"surfaceSearchBar\"\n      @click=\"selectInput\"\n      @keydown.enter=\"selectInput\"\n    >\n      <OzPlainButton\n        v-if=\"!shouldDisplayFull\"\n        data-testid=\"surfaceSearchBarFilterButton\"\n        class=\"me-4\"\n        :aria-label=\"__('Open filter posts modal')\"\n        :size-preset=\"OzPlainButtonSizePreset.H28px\"\n        :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n        :dark-mode=\"isDarkMode\"\n        @click=\"openFilterModal\"\n        @keydown.enter=\"openFilterModal\"\n      >\n        <template #icon>\n          <OzIcon v-if=\"!hasSelectedFilters\" name=\"filter_outline\" :size=\"24\" />\n          <FilterIconWithIndicator v-else :dark-mode=\"isDarkMode\" color-shade=\"text-200\" :size=\"24\" />\n        </template>\n      </OzPlainButton>\n      <OzInput\n        ref=\"inputRef\"\n        test-id=\"surfaceSearchBarInput\"\n        dir=\"auto\"\n        :dark-mode=\"isDarkMode\"\n        :size-preset=\"shouldDisplayInEditMode ? OzInputSizePreset.H40px : OzInputSizePreset.H32px\"\n        :x-border=\"shouldDisplayInEditMode\"\n        :class=\"[\n          shouldDisplayFull ? 'me-0' : 'me-2',\n          'overflow-hidden',\n          // Background\n          shouldDisplayInEditMode &&\n            shouldDisplayFull && {\n              'bg-popover-light': !isDarkMode,\n              'bg-popover-dark': isDarkMode,\n            },\n          !shouldDisplayInEditMode &&\n            shouldDisplayFull && {\n              'bg-[rgba(255,255,255,0.32)] hhover:bg-light-ui-100': !isDarkMode,\n              'bg-[rgba(0,0,0,0.24)] hhover:bg-dark-ui-100': isDarkMode,\n              'backdrop-blur-sm': true,\n            },\n          // Text\n          shouldDisplayInEditMode &&\n            hasSearchTerm && {\n              'text-dark-text-100': !isDarkMode,\n              'text-light-text-100': isDarkMode,\n            },\n          shouldDisplayInEditMode &&\n            !hasSearchTerm && {\n              'text-dark-text-400': !isDarkMode,\n              'text-light-text-400': isDarkMode,\n            },\n          !shouldDisplayInEditMode &&\n            hasSearchTerm && {\n              'text-dark-text-100': !isDarkMode,\n              'text-light-text-100': isDarkMode,\n            },\n          !shouldDisplayInEditMode &&\n            !hasSearchTerm && {\n              'text-dark-text-200': !isDarkMode,\n              'text-light-text-200': isDarkMode,\n            },\n          !shouldDisplayInEditMode && {\n            'hover-hover:hover:text-dark-text-100': !isDarkMode,\n            'hover-hover:hover:text-light-text-100': isDarkMode,\n          },\n        ]\"\n        type=\"search\"\n        inputmode=\"search\"\n        enterkeyhint=\"search\"\n        autocomplete=\"off\"\n        maxlength=\"100\"\n        :should-truncate-text=\"shouldDisplayFull\"\n        :aria-label=\"__('Search posts by keywords')\"\n        :placeholder=\"shouldDisplayInEditMode && __('Search posts')\"\n        :model-value=\"localSearchTerm\"\n        @update:modelValue=\"localSearchTerm = $event\"\n        @focusin=\"isSearchBarInEditMode = true\"\n        @blur=\"exitEditModeIfFocusTargetIsOutside\"\n        @keydown.escape.prevent=\"handleSearchInputEscKey\"\n        @keydown.enter.stop.prevent=\"exitEditMode\"\n      >\n        <template v-if=\"shouldDisplayFull\" #startAdornment>\n          <div\n            :class=\"[\n              'flex',\n              'items-center',\n              'justify-center',\n              {\n                'mx-2': shouldDisplayInEditMode || hasSearchTerm,\n                'ms-3 me-2': !shouldDisplayInEditMode && !hasSearchTerm,\n              },\n            ]\"\n          >\n            <OzIcon\n              v-if=\"(!hasSearchTerm && !hasSelectedFilters) || shouldDisplayInEditMode\"\n              name=\"search\"\n              :size=\"20\"\n              :class=\"{\n                'text-dark-text-200': !isDarkMode,\n                'text-light-text-200': isDarkMode,\n              }\"\n            />\n            <SearchIconWithIndicator v-else :dark-mode=\"isDarkMode\" color-shade=\"text-200\" :size=\"20\" />\n          </div>\n        </template>\n        <template #endAdornment>\n          <Transition\n            enter-active-class=\"transition-all motion-reduce:transition-none transform motion-reduce:transform-none\"\n            enter-class=\"opacity-0 translate-x-full rtl:-translate-x-full\"\n            enter-to-class=\"opacity-100 translate-x-0\"\n            leave-active-class=\"transition-opacity motion-reduce:transition-none\"\n            leave-class=\"opacity-100\"\n            leave-to-class=\"opacity-0\"\n            :duration=\"{ enter: 180, leave: 300 }\"\n          >\n            <div v-if=\"shouldDisplayInEditMode\" class=\"flex gap-2 mx-2\">\n              <OzPlainButton\n                v-if=\"hasSearchTerm\"\n                data-testid=\"surfaceSearchBarClearButton\"\n                :aria-label=\"__('Clear search keywords')\"\n                :size-preset=\"OzPlainButtonSizePreset.H28px\"\n                :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n                :dark-mode=\"isDarkMode\"\n                @blur=\"exitEditModeIfFocusTargetIsOutside\"\n                @keydown.escape=\"exitEditModeIfFocusTargetIsOutside\"\n                @click=\"clearSearchTermAndFocusInput\"\n                @mousedown.prevent\n                @keydown.enter=\"clearSearchTermAndFocusInput\"\n              >\n                <template #icon>\n                  <OzIcon name=\"clear_filled\" :size=\"20\" />\n                </template>\n              </OzPlainButton>\n              <OzDivider\n                v-if=\"hasSearchTerm && shouldDisplayFull\"\n                :dark-mode=\"isDarkMode\"\n                :color-scheme=\"OzDividerColorScheme.Solid\"\n                :orientation=\"OzDividerOrientation.Vertical\"\n                class=\"!w-[1px]\"\n              />\n              <OzPlainButton\n                v-if=\"shouldDisplayFull\"\n                data-testid=\"surfaceSearchBarFilterButton\"\n                :aria-label=\"__('Open filter posts modal')\"\n                :size-preset=\"OzPlainButtonSizePreset.H28px\"\n                :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n                :dark-mode=\"isDarkMode\"\n                @blur=\"exitEditModeIfFocusTargetIsOutside\"\n                @keydown.escape=\"exitEditModeIfFocusTargetIsOutside\"\n                @click=\"openFilterModal\"\n                @mousedown.prevent\n                @keydown.enter=\"openFilterModal\"\n              >\n                <template #icon>\n                  <OzIcon\n                    v-if=\"!hasSelectedFilters\"\n                    :name=\"xFilterModal ? 'filter_filled' : 'filter_outline'\"\n                    :size=\"20\"\n                  />\n                  <FilterIconWithIndicator v-else :dark-mode=\"isDarkMode\" color-shade=\"text-200\" :size=\"20\" />\n                </template>\n              </OzPlainButton>\n            </div>\n            <div v-else :class=\"shouldDisplayFull && 'pe-3'\"></div>\n          </Transition>\n        </template>\n      </OzInput>\n      <OzPlainButton\n        v-if=\"!shouldDisplayFull\"\n        data-testid=\"surfaceSearchBarDoneButton\"\n        :dark-mode=\"isDarkMode\"\n        :color-scheme=\"OzPlainButtonColorScheme.Primary\"\n        :aria-label=\"__('Apply search and filters')\"\n        :text=\"__('Done')\"\n        @click=\"applySearchAndFilters\"\n      />\n      <SurfaceFilterModal v-if=\"xFilterModal\" />\n    </div>\n  </Transition>\n</template>\n\n<style>\n.search-bar-cursor-pointer * {\n  cursor: pointer;\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.slide-enter,\n.slide-leave-to {\n  transform: translateY(100%);\n}\n.slide-enter-to,\n.slide-leave {\n  transform: translateY(0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slide-enter,\n  .slide-leave-to {\n    transform: none;\n  }\n  .slide-enter-to,\n  .slide-leave {\n    transform: none;\n  }\n}\n\n.slide-enter-active {\n  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1); // https://material.io/design/motion/speed.html#easing\n}\n.slide-leave-active {\n  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1); // https://material.io/design/motion/speed.html#easing\n}\n</style>\n"],"file":"assets/SurfaceSearchBar-Bh6fLMRT.js"}