{"version":3,"file":"SearchInput-BwFQG9BJ.js","sources":["../../../packs/frontend/components/SearchInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { t } = useI18n();\n\ntype Props = {\n  placeholder?: string;\n  size?: \"md\" | \"lg\";\n  modelValue?: string;\n  showClearButton?: boolean;\n};\n\nwithDefaults(defineProps<Props>(), {\n  placeholder: \"\",\n  size: undefined,\n  modelValue: \"\",\n  showClearButton: false,\n});\n\nconst emit = defineEmits([\"update:modelValue\", \"submit\"]);\n\nconst handleInputEvent = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  emit(\"update:modelValue\", target.value);\n};\n\nconst clearSearch = () => {\n  emit(\"update:modelValue\", \"\");\n};\n</script>\n<template>\n  <div\n    class=\"search-input__container\"\n    :class=\"{ 'search-input__container--lg': size === 'lg' }\"\n  >\n    <div class=\"search-input__wrapper\">\n      <input\n        :value=\"modelValue\"\n        type=\"search\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"placeholder\"\n        class=\"form-control search-input__input\"\n        :class=\"{\n          'form-control-lg': size === 'lg',\n          'form-control-md': size === 'md',\n          'search-input__input--clear': showClearButton,\n        }\"\n        @input=\"handleInputEvent\"\n      />\n      <button\n        id=\"button-addon2\"\n        name=\"button\"\n        type=\"submit\"\n        class=\"search-input__button input-group-text\"\n        :aria-label=\"t('links.search')\"\n        @click=\"emit('submit')\"\n        @keyup.enter=\"emit('submit')\"\n      >\n        <i class=\"bi bi-search\"></i>\n      </button>\n      <button\n        v-if=\"showClearButton && modelValue\"\n        id=\"button-addon3\"\n        name=\"clear-button\"\n        type=\"submit\"\n        class=\"search-input__button search-input__button--clear input-group-text\"\n        :aria-label=\"t('links.delete')\"\n        @click=\"clearSearch\"\n        @keyup.enter=\"clearSearch\"\n      >\n        <i class=\"bi bi-x-lg\"></i>\n      </button>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.search-input {\n  &__container {\n    width: 100%;\n    display: flex;\n    align-items: center;\n  }\n\n  &__wrapper {\n    position: relative;\n    width: 100%;\n  }\n\n  &__button {\n    position: absolute;\n    top: $input-btn-padding-y-sm;\n    bottom: $input-btn-padding-y-sm;\n    left: $input-btn-padding-y-sm;\n    border: none;\n    border-right: 0;\n    color: $secondary;\n    background-color: $color-white;\n    border-radius: $border-radius-md;\n\n    &--clear {\n      right: $input-btn-padding-y-sm;\n      left: auto;\n    }\n\n    &:hover {\n      background: $hover-color;\n    }\n  }\n\n  &__input {\n    width: 100%;\n    padding-left: 44px;\n    border-radius: $border-radius-md;\n\n    &--clear {\n      padding-right: 44px;\n    }\n  }\n}\n\n/* clears the 'X' from Chrome */\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\n.form-control-md {\n  @include media-breakpoint-down(sm) {\n    font-size: $font-size-sm;\n  }\n}\n</style>\n"],"names":["t","useI18n","emit","__emit","handleInputEvent","event","target","clearSearch"],"mappings":"wcACM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAgBhBC,EAAOC,EAEPC,EAAoBC,GAAiB,CACzC,MAAMC,EAASD,EAAM,OAChBH,EAAA,oBAAqBI,EAAO,KAAK,CACxC,EAEMC,EAAc,IAAM,CACxBL,EAAK,oBAAqB,EAAE,CAC9B"}