{"version":3,"file":"53RomXNx.js","sources":["../../../../skeleton/components/selects/custom-select.vue","../../../../skeleton/components/modal/games-filter.vue"],"sourcesContent":["<template>\n  <div\n    class=\"custom-select\"\n    :class=\"{ 'custom-select--open': isOpen }\"\n    v-click-outside=\"closeCustomSelect\"\n  >\n    <div\n      class=\"custom-select-input\"\n      @click=\"toggleCustomSelect\"\n    >\n      <div class=\"custom-select-input__label\">{{ labelText }}</div>\n\n      <div class=\"custom-select-input__icon\">\n        <atomic-icon id=\"arrow_expand-close\" />\n      </div>\n    </div>\n\n    <list-filterable-check-box\n      v-if=\"isOpen\"\n      v-model:selectedOptions=\"selectedOptions\"\n      :options=\"options\"\n      :identifierKey=\"identifierKey\"\n      :labelKey=\"labelKey\"\n      :customClass=\"customClass\"\n      @onSave=\"closeCustomSelect\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(\n  defineProps<{\n    options: any[];\n    label: string,\n    identifierKey?: string;\n    labelKey?: string;\n    customClass?: string;\n  }>(),\n  {\n    options: () => [],\n    identifierKey: 'identity',\n    labelKey: 'name',\n    customClass: '',\n  }\n);\n\nconst selectedOptions = defineModel('selectedOptions', {\n  type: Array as () => string[],\n  default: () => [],\n});\n\nconst isOpen = ref(false)\n\nconst labelText = computed(() => {\n  return selectedOptions.value.length\n    ? props.options\n      .filter((item) => selectedOptions.value.includes(item[props.identifierKey]))\n      .map((item) => item.name)\n      .join(', ')\n    : props.label\n})\n\nconst toggleCustomSelect = () => {\n  isOpen.value = !isOpen.value\n}\n\nconst closeCustomSelect = () => {\n  isOpen.value = false\n}\n</script>\n\n<style src=\"~/assets/styles/components/selects/custom-select/custom-select.scss\" lang=\"scss\" />\n","<template>\n  <vue-final-modal\n    class=\"modal-games-filter\"\n    :overlayTransition=\"{ mode: 'in-out', duration: 200 }\"\n    :contentTransition=\"{ mode: 'in-out', duration: 200 }\"\n    clickToClose\n    @clickOutside=\"closeDialog\"\n  >\n    <div class=\"modal-games-filter__container\">\n      <atomic-icon class=\"modal-games-filter__close\" id=\"close\" @click=\"closeDialog\" />\n\n      <div class=\"modal-games-filter__header\">\n        <div class=\"modal-games-filter__title\">\n          {{ getContent(popupsData, defaultLocalePopupsData, 'gamesFilter.title') }}\n        </div>\n\n        <div v-if=\"showResetBtn\" class=\"modal-games-filter__reset\" @click=\"onResetAll\">\n          {{ getContent(popupsData, defaultLocalePopupsData, 'gamesFilter.resetAll') }}\n        </div>\n      </div>\n\n      <div class=\"modal-games-filter__block\">\n        <div class=\"modal-games-filter__label\">\n          {{ getContent(popupsData, defaultLocalePopupsData, 'gamesFilter.feature') }}\n        </div>\n\n        <selects-custom-select\n          v-model:selectedOptions=\"selectedFeatures\"\n          :options=\"featuresWithIdentity\"\n          :label=\"getContent(popupsData, defaultLocalePopupsData, 'gamesFilter.allFeatures')\"\n          :customClass=\"hideProviders ? 'filterable-check-box--media-height' : ''\"\n        />\n      </div>\n\n      <div v-if=\"!hideProviders\" class=\"modal-games-filter__block\">\n        <div class=\"modal-games-filter__label\">\n          {{ getContent(popupsData, defaultLocalePopupsData, 'gamesFilter.provider') }}\n        </div>\n\n        <selects-custom-select\n          v-model:selectedOptions=\"selectedProviders\"\n          :options=\"getFilteredProviders\"\n          :label=\"getContent(popupsData, defaultLocalePopupsData, 'gamesFilter.allProviders')\"\n          customClass=\"filterable-check-box--media-height\"\n        />\n      </div>\n\n      <div class=\"modal-games-filter__buttons\">\n        <button-base class=\"modal-games-filter__button\" type=\"gray\" size=\"md\" @click=\"closeDialog\">\n          {{ getContent(layoutData, defaultLocaleLayoutData, 'buttons.cancel') }}\n        </button-base>\n\n        <button-base\n          class=\"modal-games-filter__button\"\n          type=\"primary\"\n          size=\"md\"\n          :isDisabled=\"applyDisabled\"\n          @click=\"onApplyFilter\"\n        >\n          {{ getContent(layoutData, defaultLocaleLayoutData, 'buttons.apply') }}\n        </button-base>\n      </div>\n    </div>\n  </vue-final-modal>\n</template>\n\n<script setup lang=\"ts\">\n  import { VueFinalModal } from 'vue-final-modal';\n\n  import isEqual from 'lodash/isEqual';\n\n  import { normalizeToArray } from '@skeleton/utils/arrayUtils';\n\n  import { ModalName } from '@skeleton/consts/modals';\n\n  withDefaults(\n    defineProps<{\n      hideProviders: boolean;\n    }>(),\n    {\n      hideProviders: false,\n    }\n  );\n\n  const { closeModal } = useModalStore();\n  const { getContent } = useProjectMethods();\n  const { popupsData, defaultLocalePopupsData, layoutData, defaultLocaleLayoutData } = storeToRefs(useGlobalStore());\n  const { getFilteredProviders } = storeToRefs(useGameProvidersStore());\n  const { featuresWithIdentity } = storeToRefs(useGameFeaturesStore());\n\n  const route = useRoute();\n  const router = useRouter();\n\n  const selectedProviders = ref<string[]>([]);\n  const selectedFeatures = ref<string[]>([]);\n\n  const applyDisabled = computed(() => {\n    const { providers, features } = route.query;\n\n    const isProvidersDifferent = !isEqual(normalizeToArray(providers), selectedProviders.value);\n    const isFeaturesDifferent = !isEqual(normalizeToArray(features), selectedFeatures.value);\n\n    return !isProvidersDifferent && !isFeaturesDifferent;\n  });\n\n  const showResetBtn = computed(() => selectedProviders.value.length || selectedFeatures.value.length);\n\n  const parseQuery = () => {\n    const { providers = [], features = [] } = route.query;\n\n    selectedProviders.value = normalizeToArray(providers);\n    selectedFeatures.value = normalizeToArray(features);\n  };\n\n  const closeDialog = () => {\n    closeModal(ModalName.GAMES_FILTER);\n  };\n\n  const onResetAll = () => {\n    selectedProviders.value = [];\n    selectedFeatures.value = [];\n  };\n\n  const onApplyFilter = () => {\n    updateQueryWithReplace();\n    closeDialog();\n  };\n\n  const updateQueryWithReplace = () => {\n    router.replace({\n      query: {\n        ...route.query,\n        providers: selectedProviders.value,\n        features: selectedFeatures.value,\n      },\n    });\n  };\n\n  onMounted(() => {\n    parseQuery();\n  });\n</script>\n\n<style src=\"~/assets/styles/components/modal/games-filter.scss\" lang=\"scss\" />\n"],"names":["props","__props","selectedOptions","_useModel","isOpen","ref","labelText","computed","item","toggleCustomSelect","closeCustomSelect","closeModal","useModalStore","getContent","useProjectMethods","popupsData","defaultLocalePopupsData","layoutData","defaultLocaleLayoutData","storeToRefs","useGlobalStore","getFilteredProviders","useGameProvidersStore","featuresWithIdentity","useGameFeaturesStore","route","useRoute","router","useRouter","selectedProviders","selectedFeatures","applyDisabled","providers","features","isProvidersDifferent","isEqual","normalizeToArray","isFeaturesDifferent","showResetBtn","parseQuery","closeDialog","ModalName","onResetAll","onApplyFilter","updateQueryWithReplace","onMounted"],"mappings":"21BA8BA,MAAMA,EAAQC,EAgBRC,EAAkBC,EAAYF,EAAA,iBAGnC,EAEKG,EAASC,EAAI,EAAK,EAElBC,EAAYC,EAAS,IAClBL,EAAgB,MAAM,OACzBF,EAAM,QACL,OAAQQ,GAASN,EAAgB,MAAM,SAASM,EAAKR,EAAM,aAAa,CAAC,CAAC,EAC1E,IAAKQ,GAASA,EAAK,IAAI,EACvB,KAAK,IAAI,EACVR,EAAM,KACX,EAEKS,EAAqB,IAAM,CACxBL,EAAA,MAAQ,CAACA,EAAO,KACzB,EAEMM,EAAoB,IAAM,CAC9BN,EAAO,MAAQ,EACjB,28BCgBQ,KAAA,CAAE,WAAAO,CAAW,EAAIC,EAAc,EAC/B,CAAE,WAAAC,CAAW,EAAIC,GAAkB,EACnC,CAAE,WAAAC,EAAY,wBAAAC,EAAyB,WAAAC,EAAY,wBAAAC,GAA4BC,EAAYC,GAAgB,EAC3G,CAAE,qBAAAC,CAAA,EAAyBF,EAAYG,IAAuB,EAC9D,CAAE,qBAAAC,CAAA,EAAyBJ,EAAYK,GAAsB,EAE7DC,EAAQC,EAAS,EACjBC,EAASC,GAAU,EAEnBC,EAAoBxB,EAAc,EAAE,EACpCyB,EAAmBzB,EAAc,EAAE,EAEnC0B,EAAgBxB,EAAS,IAAM,CACnC,KAAM,CAAE,UAAAyB,EAAW,SAAAC,CAAS,EAAIR,EAAM,MAEhCS,EAAuB,CAACC,EAAQC,EAAiBJ,CAAS,EAAGH,EAAkB,KAAK,EACpFQ,EAAsB,CAACF,EAAQC,EAAiBH,CAAQ,EAAGH,EAAiB,KAAK,EAEhF,MAAA,CAACI,GAAwB,CAACG,CAAA,CAClC,EAEKC,EAAe/B,EAAS,IAAMsB,EAAkB,MAAM,QAAUC,EAAiB,MAAM,MAAM,EAE7FS,EAAa,IAAM,CACjB,KAAA,CAAE,UAAAP,EAAY,CAAC,EAAG,SAAAC,EAAW,CAAC,CAAA,EAAMR,EAAM,MAE9BI,EAAA,MAAQO,EAAiBJ,CAAS,EACnCF,EAAA,MAAQM,EAAiBH,CAAQ,CACpD,EAEMO,EAAc,IAAM,CACxB7B,EAAW8B,GAAU,YAAY,CACnC,EAEMC,EAAa,IAAM,CACvBb,EAAkB,MAAQ,CAAC,EAC3BC,EAAiB,MAAQ,CAAC,CAC5B,EAEMa,EAAgB,IAAM,CACHC,EAAA,EACXJ,EAAA,CACd,EAEMI,EAAyB,IAAM,CACnCjB,EAAO,QAAQ,CACb,MAAO,CACL,GAAGF,EAAM,MACT,UAAWI,EAAkB,MAC7B,SAAUC,EAAiB,KAAA,CAC7B,CACD,CACH,EAEA,OAAAe,GAAU,IAAM,CACHN,EAAA,CAAA,CACZ"}