{"version":3,"file":"FiltersButton-vyeODnHw.js","sources":["../../../app/javascript/shared/components/filters/FiltersButton.vue"],"sourcesContent":["<template>\n  <VDropdown\n    :placement=\"placement\"\n    @apply-show=\"handleDropdownShow\"\n    @apply-hide=\"isFocusLoopActive = false\"\n    :disabled=\"isDropdownDisabled\"\n  >\n    <button\n      class=\"tw-inline-flex tw-w-full tw-items-center tw-justify-center tw-space-x-2 tw-rounded-md tw-border tw-px-2 tw-py-2 tw-text-sm tw-text-neutral-700 tw-transition-colors hover:tw-border-secondary-300 hover:tw-text-neutral-900 focus-visible:tw-border-secondary-300 focus-visible:tw-text-neutral-900 focus-visible:tw-outline-none\"\n      :class=\"[\n        hasSelectedValues\n          ? 'tw-border-secondary-200 tw-bg-secondary-50'\n          : 'tw-border-neutral-200 tw-bg-white',\n      ]\"\n      @click=\"$emit('click')\"\n    >\n      <BaseIcon\n        v-if=\"isLocked\"\n        name=\"lock-4\"\n        class=\"tw-h-4 tw-w-4 tw-text-secondary-500\"\n      />\n      <span><slot /></span>\n      <template v-if=\"!isRadioSelect && hasSelectedValues\">\n        <span>•</span>\n        <span>\n          {{ filtersStateValue.length }}\n        </span>\n      </template>\n      <span class=\"!tw-ml-3 tw-flex tw-grow tw-justify-end\">\n        <ArrowDownIcon class=\"tw-w-[10px] tw-text-neutral-900\" />\n      </span>\n    </button>\n    <template #popper=\"{ hide }\">\n      <div class=\"tw-p-4\" :class=\"{ 'tw-pb-1': isLocked }\">\n        <FocusLoop :is-active=\"isFocusLoopActive\" is-arrows-navigation-active>\n          <template v-if=\"!activeGroup\">\n            <div class=\"tw-mb-2 tw-flex tw-items-center tw-justify-between\">\n              <span class=\"tw-text-sm tw-font-semibold tw-uppercase\">\n                <slot />\n              </span>\n              <BaseButton\n                v-if=\"hasSelectedValues && !isRadioSelect\"\n                size=\"xs\"\n                color=\"outline-secondary\"\n                class=\"tw-inline-flex tw-items-center !tw-py-0.5\"\n                @click=\"handleClearAll\"\n              >\n                <span>{{ filtersStateValue.length }} selected</span>\n                <CloseIcon class=\"tw-ml-1 tw-h-3 tw-w-3\" />\n              </BaseButton>\n            </div>\n            <FormInput\n              v-if=\"searchable\"\n              v-model=\"searchInput\"\n              class=\"tw-mb-3 tw-max-w-sm\"\n              placeholder=\"Search...\"\n              type=\"text\"\n            />\n\n            <div\n              v-if=\"hasGroups\"\n              class=\"tw-max-h-72 tw-overflow-y-auto tw-overscroll-contain tw-pr-2 xl:tw-max-h-96\"\n            >\n              <div v-if=\"searchInput\" class=\"tw-space-y-2\">\n                <div\n                  v-for=\"(group, index) in resultsFromGroups\"\n                  :key=\"index\"\n                  class=\"tw-space-y-2\"\n                >\n                  <div\n                    v-for=\"(element, key) in group.elements\"\n                    :key=\"key\"\n                    class=\"tw-flex tw-items-center tw-justify-between tw-space-x-8 xl:tw-m-0\"\n                    @click=\"handleClick(hide)\"\n                  >\n                    <FormCheckbox\n                      v-model=\"filtersStateValue\"\n                      class=\"tw-my-2 tw-flex tw-items-center xl:tw-m-0\"\n                      :value=\"element.value\"\n                      @update:checked=\"sendSegmentAnalytics\"\n                      @input=\"handleChange\"\n                      :is-disabled=\"isLocked\"\n                      :class=\"{ 'tw-pointer-events-none': isLocked }\"\n                    >\n                      <img\n                        class=\"tw-mr-2 tw-h-8 tw-w-8 tw-rounded\"\n                        v-if=\"element.icon\"\n                        :src=\"element.icon\"\n                        :alt=\"`${element.label} logo`\"\n                      />\n                      {{ element.label }}\n                    </FormCheckbox>\n                    <Tag\n                      v-if=\"!isNaN(element.count)\"\n                      size=\"small\"\n                      class=\"!tw-py-0\"\n                    >\n                      {{ element.count }}\n                    </Tag>\n                  </div>\n                </div>\n              </div>\n              <template v-else>\n                <div v-if=\"resultsFromGroups.length\" class=\"tw-space-y-2\">\n                  <button\n                    v-for=\"(group, index) in resultsFromGroups\"\n                    :key=\"index\"\n                    @click=\"setActiveGroup(group)\"\n                    class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-space-x-8\"\n                  >\n                    <span\n                      class=\"tw-inline-flex tw-items-center tw-space-x-2 tw-font-medium tw-text-neutral-600\"\n                    >\n                      <span class=\"tw-text-sm\">\n                        {{ group.name }}\n                      </span>\n                      <span\n                        class=\"tw-grid tw-h-6 tw-w-6 tw-place-items-center tw-rounded-full tw-bg-neutral-50 tw-text-xs tw-transition-colors\"\n                      >\n                        {{ group.elements.length }}\n                      </span>\n                    </span>\n                    <span class=\"tw-inline-flex tw-items-center tw-space-x-2\">\n                      <Tag\n                        v-if=\"group.selectedInGroupCount > 0\"\n                        size=\"small\"\n                        class=\"!tw-py-0\"\n                      >\n                        {{ group.selectedInGroupCount }} selected\n                      </Tag>\n                      <ArrowRightIcon\n                        class=\"tw-h-3 tw-w-3 tw-text-neutral-600\"\n                      />\n                    </span>\n                  </button>\n                </div>\n                <div v-else class=\"tw-text-sm\">No results found</div>\n              </template>\n            </div>\n\n            <div\n              v-else\n              class=\"xl:tw-max-h-92 tw-max-h-72 tw-overflow-y-auto tw-overscroll-contain tw-pr-2\"\n            >\n              <div v-if=\"visibleResults.length\" class=\"tw-w-full tw-space-y-1\">\n                <div\n                  v-for=\"(element, index) in visibleResults\"\n                  :key=\"index\"\n                  class=\"tw-my-2 tw-flex tw-items-center tw-justify-between tw-space-x-8 xl:tw-m-0\"\n                  @click=\"handleClick(hide)\"\n                >\n                  <component\n                    :is=\"isRadioSelect ? FormRadio : FormCheckbox\"\n                    v-model=\"filtersStateValue\"\n                    :value=\"element.value\"\n                    @update:checked=\"sendSegmentAnalytics\"\n                    @input=\"handleChange\"\n                    :is-disabled=\"isLocked\"\n                    class=\"tw-items-center\"\n                    :class=\"{ 'tw-pointer-events-none': isLocked }\"\n                  >\n                    <img\n                      v-if=\"element.icon\"\n                      :src=\"element.icon\"\n                      :alt=\"element.label\"\n                      class=\"tw-mr-2\"\n                    />\n                    <span\n                      v-else-if=\"stateKey === 'companies'\"\n                      class=\"tw-mr-2 tw-grid tw-size-8 tw-place-items-center tw-rounded-full tw-bg-secondary-300 tw-text-white\"\n                    >\n                      {{ element.label[0] }}\n                    </span>\n                    <span>{{ element.label }}</span>\n                  </component>\n                  <Tag\n                    v-if=\"!isNaN(element.count)\"\n                    size=\"small\"\n                    class=\"!tw-py-0\"\n                  >\n                    {{ element.count }}\n                  </Tag>\n                </div>\n                <InfiniteLoading\n                  v-if=\"!isSearching\"\n                  @infinite=\"loadMore\"\n                  :distance=\"500\"\n                >\n                  <template #spinner>\n                    <div class=\"tw-mx-auto tw-mt-4\">\n                      <LoadingCircle class=\"tw-mx-auto\" size=\"32\" />\n                    </div>\n                  </template>\n                  <template #no-more>\n                    <span />\n                  </template>\n                  <template #no-results>\n                    <span />\n                  </template>\n                  <template #error>\n                    Something went wrong while loading...\n                  </template>\n                </InfiniteLoading>\n              </div>\n              <div v-else class=\"tw-text-sm\">No results found</div>\n            </div>\n          </template>\n\n          <div\n            v-else\n            class=\"tw-max-h-72 tw-overflow-y-auto tw-overscroll-contain tw-pr-2 xl:tw-max-h-96\"\n          >\n            <BaseButton\n              @click=\"clearActiveGroup\"\n              color=\"outline-gray\"\n              size=\"xs\"\n              class=\"tw-mb-2\"\n            >\n              <ArrowLeftIcon class=\"tw-mr-1.5 tw-h-3 tw-w-3\" />\n              Back\n            </BaseButton>\n            <div class=\"tw-space-y-2\">\n              <div\n                v-for=\"(element, key) in activeGroup.elements\"\n                :key=\"key\"\n                class=\"tw-flex tw-items-center tw-justify-between tw-space-x-8 xl:tw-m-0\"\n                @click=\"handleClick(hide)\"\n              >\n                <FormCheckbox\n                  v-model=\"filtersStateValue\"\n                  class=\"tw-my-2 tw-flex tw-items-center xl:tw-m-0\"\n                  :value=\"element.value\"\n                  @update:checked=\"sendSegmentAnalytics\"\n                  @input=\"handleChange\"\n                  :is-disabled=\"isLocked\"\n                >\n                  <img\n                    class=\"tw-mr-2 tw-h-8 tw-w-8 tw-rounded\"\n                    v-if=\"element.icon\"\n                    :src=\"element.icon\"\n                    :alt=\"`${element.label} logo`\"\n                  />\n                  {{ element.label }}\n                </FormCheckbox>\n                <Tag v-if=\"!isNaN(element.count)\" size=\"small\" class=\"!tw-py-0\">\n                  {{ element.count }}\n                </Tag>\n              </div>\n            </div>\n          </div>\n        </FocusLoop>\n      </div>\n      <div\n        v-if=\"isLocked\"\n        class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-text-xs\"\n        style=\"\n          background: linear-gradient(0deg, #ecfdf3, #ecfdf3),\n            linear-gradient(\n              268.29deg,\n              rgba(255, 199, 39, 0.1) 0%,\n              rgba(36, 168, 83, 0) 100%\n            );\n        \"\n      >\n        <GoldCoinIcon\n          class=\"tw-mr-2 tw-h-5 tw-w-5 tw-rounded-full tw-border-2 tw-border-success-100 tw-text-success-900\"\n        />\n        <span class=\"tw-text-success-600\">\n          Upgrade to\n          <span class=\"tw-font-semibold\">Pro Membership</span>\n          to unlock all filters\n        </span>\n      </div>\n    </template>\n  </VDropdown>\n</template>\n\n<script setup>\nimport GoldCoinIcon from '@/assets/images/icons/gold-coin-2.svg'\nimport FormCheckbox from '../forms/FormCheckbox.vue'\nimport FormInput from '../forms/FormInput.vue'\nimport Tag from '../Tag.vue'\nimport BaseButton from '../BaseButton.vue'\nimport FormRadio from '../forms/FormRadio.vue'\nimport FocusLoop from '../FocusLoop.vue'\nimport ArrowDownIcon from '@/assets/images/icons/arrow-down.svg'\nimport CloseIcon from '@/assets/images/icons/close.svg'\nimport { ref } from 'vue'\nimport { useFiltersInjector } from '@/shared/composables/filters/useFiltersInjector.js'\nimport ArrowRightIcon from '@/assets/images/icons/arrow-right.svg'\nimport ArrowLeftIcon from '@/assets/images/icons/arrow-left.svg'\nimport BaseIcon from '@/shared/components/BaseIcon.vue'\nimport { UNLOCK_FULL_ACCESS_MODAL_NAME } from '@/shared/data/globalVariables'\nimport { useModals } from '@/shared/composables/useModals'\nimport LoadingCircle from '@/shared/components/LoadingCircle.vue'\n\nconst emit = defineEmits(['change', 'click'])\n\nconst props = defineProps({\n  stateKey: {\n    type: String,\n    required: true,\n  },\n  searchable: {\n    type: Boolean,\n    default: false,\n  },\n  isRadioSelect: {\n    type: Boolean,\n    default: false,\n  },\n  hasGroups: {\n    type: Boolean,\n    default: false,\n  },\n  placement: {\n    type: String,\n    default: 'bottom-start',\n  },\n  isDropdownDisabled: {\n    type: Boolean,\n    default: false,\n  },\n  isLocked: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst isFocusLoopActive = ref(false)\nconst { openModal } = useModals()\nconst {\n  filtersStateValue,\n  results,\n  resultsFromGroups,\n  clearAll,\n  searchInput,\n  hasSelectedValues,\n  sendSegmentAnalytics,\n  isSearching,\n  visibleResults,\n  loadMore,\n  resetPageData,\n  page,\n} = useFiltersInjector({\n  stateKey: props.stateKey,\n})\n\nconst handleChange = () => {\n  emit('change')\n}\n\nconst handleClearAll = () => {\n  clearAll()\n  emit('change')\n}\n\nconst handleClick = (hideMethod) => {\n  if (!props.isLocked) return\n  hideMethod()\n  openModal(UNLOCK_FULL_ACCESS_MODAL_NAME)\n}\n\nconst activeGroup = ref(null)\nconst setActiveGroup = (group) => {\n  activeGroup.value = group\n}\nconst clearActiveGroup = () => {\n  activeGroup.value = null\n}\n\nconst handleDropdownShow = () => {\n  searchInput.value = ''\n  resetPageData()\n  isFocusLoopActive.value = true\n}\n</script>\n"],"names":["emit","__emit","props","__props","isFocusLoopActive","ref","openModal","useModals","filtersStateValue","results","resultsFromGroups","clearAll","searchInput","hasSelectedValues","sendSegmentAnalytics","isSearching","visibleResults","loadMore","resetPageData","page","useFiltersInjector","handleChange","handleClearAll","handleClick","hideMethod","UNLOCK_FULL_ACCESS_MODAL_NAME","activeGroup","setActiveGroup","group","clearActiveGroup","handleDropdownShow"],"mappings":";;;;;ugBAwSA,MAAMA,EAAOC,EAEPC,EAAQC,EA+BRC,EAAoBC,EAAI,EAAK,EAC7B,CAAE,UAAAC,CAAW,EAAGC,GAAW,EAC3B,CACJ,kBAAAC,EACA,QAAAC,GACA,kBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,YAAAC,EACA,eAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,EACF,EAAIC,GAAmB,CACrB,SAAUlB,EAAM,QAClB,CAAC,EAEKmB,EAAe,IAAM,CACzBrB,EAAK,QAAQ,CACf,EAEMsB,EAAiB,IAAM,CAC3BX,EAAU,EACVX,EAAK,QAAQ,CACf,EAEMuB,EAAeC,GAAe,CAC7BtB,EAAM,WACXsB,EAAY,EACZlB,EAAUmB,EAA6B,EACzC,EAEMC,EAAcrB,EAAI,IAAI,EACtBsB,EAAkBC,GAAU,CAChCF,EAAY,MAAQE,CACtB,EACMC,EAAmB,IAAM,CAC7BH,EAAY,MAAQ,IACtB,EAEMI,EAAqB,IAAM,CAC/BlB,EAAY,MAAQ,GACpBM,EAAe,EACfd,EAAkB,MAAQ,EAC5B"}