{"version":3,"file":"Combobox-DEtUC9d4.js","sources":["../../../resources/js/Components/Input/Text.vue","../../../resources/js/Components/Input/Checkbox.vue","../../../resources/js/Components/Input/Combobox.vue"],"sourcesContent":["<script setup>\n\nconst input = defineModel({type: String});\n\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n  },\n  autocomplete: {\n    type: String,\n    default: \"on\",\n  },\n  label: {\n    type: String,\n    required: true,\n  },\n  hideLabel: {\n    type: Boolean,\n    default: false,\n  },\n  validation: {\n    type: Object,\n    default: {},\n  },\n  type: {\n    type: String,\n    default: 'text',\n  },\n  inputClass: {\n    type: String,\n    default: '',\n  },\n});\n\nconst emit = defineEmits('keydown:enter')\n</script>\n\n<template>\n  <div>\n    <label\n      :for=\"name\"\n      :class=\"{'sr-only': hideLabel}\"\n      class=\"text-xs font-semibold\"\n    >{{ label }}</label>\n    <input\n      v-model=\"input\"\n      class=\"py-2 px-3 w-full block border border-solid border-primary-500 rounded-3xl text-primary-900 focus:border-red\"\n      :class=\"( validation.$error ? 'ring-1 ring-red' : 'bg-white ') + inputClass\"\n      :autocomplete=\"autocomplete\"\n      :type=\"type\"\n      :name=\"name\"\n      :placeholder=\"placeholder\"\n      @keydown.enter=\"emit('keydown:enter')\"\n    >\n    <div\n      v-if=\"validation.$error\"\n      class=\"text-red text-sm\"\n    >\n      {{ validation.$errors[0].$message }}\n    </div>\n  </div>\n</template>\n","<script setup>\nimport Icon from '@/Components/Icon/index.vue';\n\nconst input = defineModel({type: [String, Boolean]});\n\nconst props = defineProps({\n  value: {\n    type: [String, Boolean],\n    retuired: true,\n  },\n  name: {\n    type: String,\n    required: true,\n  },\n  label: {\n    type: String,\n    required: true,\n  },\n  hideLabel: {\n    type: Boolean,\n    default: false,\n  },\n  type: {\n    type: String,\n  },\n  id: {\n    type: String,\n    required: true\n  },\n  tabIndex: {\n    type: Number,\n    default: 0\n  }\n});\n\nconst emit = defineEmits('update:value');\n\nconst boxChecked = () => {\n  emit('update:value', !input.value);\n};\n\n</script>\n\n<template>\n  <div\n class=\"flex items-center cursor-pointer\" \n           @click=\"boxChecked\">\n    <button :id=\"id\" :tabIndex=\"tabIndex\" :aria-checked=\"input\" role=\"checkbox\" class=\"me-2 h-6 w-6 rounded-full border border-solid border-black flex justify-center items-center flex-none\">\n      <Icon v-if=\"input || value\" :path=\"props.type === 'radio' ?  'RadioDot' : 'Check'\" class=\"block flex-none text-primary-500\"/>\n    </button>\n    <span>{{ label }}</span>\n  </div>\n</template>\n","<script setup>\nimport Checkbox from '@/Components/Input/Checkbox.vue';\nimport Icon from '@/Components/Icon/index.vue';\nimport { ref, computed } from 'vue';\nimport { onClickOutside } from '@vueuse/core';\n\n\nconst props = defineProps({\n  label: {\n    type: String,\n    required: true\n  },\n  placeholder: {\n    type: String,\n    default: null,\n  },\n  name: {\n    type: String,\n    required: true,\n  },\n  options: {\n    type: Array,\n    required: true,\n  },\n  multiSelect: {\n    type: Boolean,\n    default: false\n  },\n  hideLabel: {\n    type: Boolean,\n    default: false,\n  },\n  validation: {\n    type: Object,\n    default: {},\n  },\n  fieldStyle: {\n    type: String,\n    required: false,\n  },\n  searchAble: {\n    type: Boolean,\n    default: true,\n  }\n});\n\nconst selectedOptions = defineModel({ type: [Array, String]});\n\nconst toggleOptions = (event, flag) => {\n  if(flag) {\n    if(event.shiftKey && event.key == \"Tab\"){\n      return\n    }\n  }\n  focusedOptionIndex.value = 0\n  optionsOpen.value = !optionsOpen.value;\n  searchField.value = \"\";\n};\n\nconst onChecked = (checkboxValue) => {\n  if(!props.multiSelect){\n    selectedOptions.value = selectedOptions.value == checkboxValue ? '' : checkboxValue;\n    return\n  }\n  const existingIndex = selectedOptions.value.indexOf(checkboxValue);\n  if (existingIndex != -1) {\n    selectedOptions.value.splice(existingIndex, 1);\n    return;\n  }\n  selectedOptions.value.push(checkboxValue);\n};\n\nconst optionsOpen = ref(false);\n\nconst searchField = ref('');\n\nconst filteredOptions = computed(() => {\n  return props.options.filter((option) => option.label.toLowerCase().includes(searchField.value.toLowerCase()) || selectedOptions.value.includes(option.value));\n});\n\nconst noOptionsMatch = computed(() => {\n  const noResults = 1 > filteredOptions.value.length;\n  return noResults && 2 < searchField.value.length;\n});\n\n\nconst showComboOption = (label) => {\n  return 2 > searchField.value.length ||\n              label.includes(searchField.value);\n};\n\n\nconst combobox = ref(null);\nconst comboOptions = ref(null)\nonClickOutside(combobox, (event) => {\n  searchField.value = \"\";\n  optionsOpen.value = false;\n},\n{\n  ignore: [comboOptions]\n});\n\n\nconst focusedOptionIndex = ref(0);\nconst listControl = (dir) => {\n    if(focusedOptionIndex.value == 0 && dir == -1) {\n      return\n    }\n    if(focusedOptionIndex.value == props.options.length - 1 && dir == 1) {\n      return\n    }\n\n    focusedOptionIndex.value += dir;\n\n    document.getElementById(`${props.name}-combo-option-${props.options[focusedOptionIndex.value].value}`).focus()\n}\n\n\nconst inputLabel = computed(() => {\n  if(props.multiSelect) {\n    return props.label\n  }\n  if (selectedOptions.value) {\n  return props.options.find((option) => selectedOptions.value == option.value).label;\n  }\n\n  return props.placeholder !== null ? props.placeholder : props.label;\n})\n\n</script>\n\n<template>\n  <div\n  ref=\"combobox\"\n  class=\"w-full md:w-fit relative\"\n  @keydown.esc=\"optionsOpen = false\"\n  >\n  <label :for=\"name\" :class=\"{'sr-only': hideLabel}\" class=\"text-xs font-semibold\">{{  label }}</label>\n    <input\n      type=\"hidden\"\n      :name=\"name\"\n      :value=\"selectedOptions\"\n    >\n    <div\n      tabindex=\"0\"\n      class=\"bg-white border border-solid border-primary-500 rounded-3xl text-primary cursor-pointer w-full relative px-3 py-2\"\n      :class=\"[validation.$error ? 'ring-1 ring-red' : '', fieldStyle]\"\n      @keydown.enter=\"toggleOptions\"\n      @click=\"toggleOptions\"\n    >\n      <div class=\"relative pointer-events-none flex items-center\">\n        <label :for=\"name\">{{ inputLabel }}</label>\n        <div\n          v-if=\"multiSelect\"\n          :class=\"{'opacity-100': selectedOptions.length > 0}\"\n          class=\"my-0 mx-3 bg-primary opacity-0 rounded-3xl h-5 w-5 flex justify-center items-center\"\n        >\n          <span class=\"text-white\">\n            {{ selectedOptions.length }}\n          </span>\n        </div>\n        <div class=\"h-6 w-6 ml-auto\">\n          <Icon\n            v-if=\"optionsOpen\"\n            class=\"transition ease-out duration-150 pointer-events-none\"\n            path=\"Close\"\n            :width=\"24\"\n            :height=\"24\"\n          />\n          <Icon\n            v-else\n            class=\"transition ease-out duration-150 pointer-events-none\"\n            path=\"ChevronDown\"\n            :width=\"24\"\n            :height=\"24\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"validation.$error\"\n      class=\"text-red text-sm\"\n    >\n      {{ validation.$errors[0].$message }}\n    </div>\n    <div\n      v-show=\"optionsOpen\"\n      ref=\"comboOptions\"\n      class=\"absolute top-full z-10 bg-white border-primary border-solid border rounded-lg w-11/12 md:w-max\"\n    >\n      <input\n        v-if=\"searchAble\"\n        :id=\"`${name}-combo-text-input`\"\n        v-model=\"searchField\"\n        class=\"border-none rounded-lg w-full\"\n        type=\"text\"\n        :placeholder=\"`Type to search ${label.toLowerCase()}`\"\n        @keydown.esc=\"toggleOptions\"\n        @keydown.shift.tab=\"toggleOptions\"\n      >\n      <div class=\"px-3 pt-3 pb-2 max-h-72 overflow-auto\">\n        <Checkbox\n          v-for=\"option, index in filteredOptions\"\n          v-show=\"showComboOption(option.label)\"\n          :id=\"`${name}-combo-option-${option.value}`\"\n          :key=\"`${name}-combo-option-${option.value}`\"\n          class=\"mb-4\"\n          :tab-index=\"focusedOptionIndex == index ? 0 : -1\"\n          :value=\"multiSelect ? selectedOptions.includes(option.value) : selectedOptions == option.value\"\n          :name=\"`${name}-combo-${option.value}`\"\n          :label=\"option.label\"\n          @keydown.up.prevent=\"listControl(-1)\"\n          @keydown.down.prevent=\"listControl(1)\"\n          @update:value=\"onChecked(option.value)\"\n          @keydown.tab=\"toggleOptions($event, true)\"\n        />\n        <div\n          v-if=\"noOptionsMatch\"\n          class=\"mb-4\"\n        >\n          No options match\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["input","_useModel","__props","emit","__emit","props","boxChecked","selectedOptions","toggleOptions","event","flag","focusedOptionIndex","optionsOpen","searchField","onChecked","checkboxValue","existingIndex","ref","filteredOptions","computed","option","noOptionsMatch","showComboOption","label","combobox","comboOptions","onClickOutside","listControl","dir","inputLabel"],"mappings":"+tBAEA,MAAMA,EAAQC,EAAWC,EAAA,YAAe,EAqClCC,EAAOC,ghCCpCb,MAAMJ,EAAQC,EAAWC,EAAA,YAA0B,EAE7CG,EAAQH,EA8BRC,EAAOC,EAEPE,EAAa,IAAM,CACvBH,EAAK,eAAgB,CAACH,EAAM,KAAK,CACnC,uqCChCA,MAAMK,EAAQH,EAuCRK,EAAkBN,EAAoCC,EAAA,YAAA,EAEtDM,EAAgB,CAACC,EAAOC,IAAS,CAClCA,GACED,EAAM,UAAYA,EAAM,KAAO,QAIpCE,EAAmB,MAAQ,EAC3BC,EAAY,MAAQ,CAACA,EAAY,MACjCC,EAAY,MAAQ,GACtB,EAEMC,EAAaC,GAAkB,CACnC,GAAG,CAACV,EAAM,YAAY,CACpBE,EAAgB,MAAQA,EAAgB,OAASQ,EAAgB,GAAKA,EACtE,MACD,CACD,MAAMC,EAAgBT,EAAgB,MAAM,QAAQQ,CAAa,EACjE,GAAIC,GAAiB,GAAI,CACvBT,EAAgB,MAAM,OAAOS,EAAe,CAAC,EAC7C,MACD,CACDT,EAAgB,MAAM,KAAKQ,CAAa,CAC1C,EAEMH,EAAcK,EAAI,EAAK,EAEvBJ,EAAcI,EAAI,EAAE,EAEpBC,EAAkBC,EAAS,IACxBd,EAAM,QAAQ,OAAQe,GAAWA,EAAO,MAAM,YAAW,EAAG,SAASP,EAAY,MAAM,YAAa,CAAA,GAAKN,EAAgB,MAAM,SAASa,EAAO,KAAK,CAAC,CAC7J,EAEKC,EAAiBF,EAAS,IACZ,EAAID,EAAgB,MAAM,QACxB,EAAIL,EAAY,MAAM,MAC3C,EAGKS,EAAmBC,GAChB,EAAIV,EAAY,MAAM,QACjBU,EAAM,SAASV,EAAY,KAAK,EAIxCW,EAAWP,EAAI,IAAI,EACnBQ,EAAeR,EAAI,IAAI,EAC7BS,EAAeF,EAAWf,GAAU,CAClCI,EAAY,MAAQ,GACpBD,EAAY,MAAQ,EACtB,EACA,CACE,OAAQ,CAACa,CAAY,CACvB,CAAC,EAGD,MAAMd,EAAqBM,EAAI,CAAC,EAC1BU,EAAeC,GAAQ,CACtBjB,EAAmB,OAAS,GAAKiB,GAAO,IAGxCjB,EAAmB,OAASN,EAAM,QAAQ,OAAS,GAAKuB,GAAO,IAIlEjB,EAAmB,OAASiB,EAE5B,SAAS,eAAe,GAAGvB,EAAM,IAAI,iBAAiBA,EAAM,QAAQM,EAAmB,KAAK,EAAE,KAAK,EAAE,EAAE,MAAO,EAClH,EAGMkB,EAAaV,EAAS,IACvBd,EAAM,YACAA,EAAM,MAEXE,EAAgB,MACbF,EAAM,QAAQ,KAAMe,GAAWb,EAAgB,OAASa,EAAO,KAAK,EAAE,MAGtEf,EAAM,cAAgB,KAAOA,EAAM,YAAcA,EAAM,KAC/D"}