{"version":3,"file":"BaseSelect-CZfPDNNw.js","sources":["../../src/base/BaseDropdownDodo.vue","../../src/base/BaseSelect.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"el\"\n    class=\"text-black\"\n    :class=\"disabled ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n    @mouseover=\"onMouseOver\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <slot :is-active=\"active\"></slot>\n  </div>\n\n  <div v-if=\"active\" class=\"container w-[448px] rounded-3xl overflow-hidden\" :style=\"dropdownStyles + moreDropdownStyles\">\n    <div ref=\"content\" class=\"content text-black w-full p-2\" @mouseleave=\"onMouseLeave\">\n      <div class=\"flex flex-col gap-y-2\">\n        <slot name=\"dropdown\" :toggle=\"toggle\"></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { nextTick, onBeforeUnmount, provide, ref, watch } from 'vue'\nimport { dropdownServiceKey } from '@madxnl/dodo-ui'\n\nconst props = defineProps<{\n  modelValue?: boolean\n  disabled?: boolean\n  trigger?: 'hover'\n  moreDropdownStyles?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst active = ref(false)\nconst dropdownStyles = ref('')\nconst content = ref<HTMLElement>()\nconst el = ref<HTMLElement>()\n\nwatch(\n  () => props.modelValue,\n  () => {\n    toggle(!!props.modelValue)\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => {\n  toggle(false)\n})\n\nfunction toggle(show: boolean) {\n  if (active.value === show) return\n  if (props.disabled) {\n    active.value = false\n    emit('update:modelValue', false)\n    return\n  }\n  active.value = show\n  emit('update:modelValue', show)\n  if (show) {\n    nextTick().then(() => {\n      updateUntilInactive()\n      window.addEventListener('mousedown', onWindowClick, { passive: true, capture: true })\n    })\n  } else {\n    window.removeEventListener('mousedown', onWindowClick, { capture: true })\n  }\n}\n\nfunction onClick(e: Event) {\n  if (props.trigger !== 'hover') {\n    toggle(!active.value)\n    e.preventDefault()\n  }\n}\n\nfunction onMouseOver() {\n  if (props.trigger === 'hover') {\n    toggle(true)\n  }\n}\n\nfunction onMouseLeave(e: MouseEvent) {\n  if (!active.value || props.trigger !== 'hover') return\n  const cur = e.relatedTarget as HTMLElement\n  const clickOnTrigger = el.value?.contains(cur)\n  const clickOnDropdown = content.value?.contains(cur)\n  if (clickOnTrigger || clickOnDropdown) return\n  toggle(false)\n}\n\nfunction onWindowClick(e: Event) {\n  if (e.target) {\n    const clickOnTrigger = el.value?.contains(e.target as Node)\n    const clickOnDropdown = content.value?.contains(e.target as Node)\n    if (clickOnTrigger || clickOnDropdown) return\n  }\n  toggle(false)\n}\n\nfunction updateUntilInactive() {\n  const margin = 16\n  const contentEl = content.value\n  if (!contentEl) return\n  const contentWidth = contentEl.scrollWidth\n  const buttonRect = el.value!.getBoundingClientRect()\n  const windowWidth = window.innerWidth\n  const windowHeight = window.innerHeight\n  const dropdownAbove = buttonRect.bottom + 300 + margin > windowHeight\n  const left = Math.max(margin, Math.min(buttonRect.left, windowWidth - contentWidth - margin))\n  const maxWidth = Math.min(600, windowWidth - margin * 2)\n  let styles = `left: ${left}px; max-width:${maxWidth}px;`\n  if (dropdownAbove) {\n    styles += `bottom: ${windowHeight - buttonRect.top}px; max-height: ${buttonRect.top - margin}px;`\n  } else {\n    styles += `top: ${buttonRect.bottom}px; max-height: ${windowHeight - buttonRect.bottom - margin}px;`\n  }\n  dropdownStyles.value = styles\n\n  if (active.value) requestAnimationFrame(updateUntilInactive)\n}\n\nprovide(dropdownServiceKey, { toggle })\n</script>\n\n<style lang=\"postcss\" scoped>\n.container {\n  position: fixed;\n  display: flex;\n  z-index: 100;\n}\n.content {\n  background: white !important;\n  border-radius: 4px;\n  border: 1px solid color-mix(in hsl, #091e28 10%, transparent);\n  box-shadow: 0 16px 32px #0000001a;\n  overflow: auto;\n}\n</style>\n","<template>\n  <div>\n    <Column v-if=\"variant === 'buttons'\" align=\"center\">\n      <slot\n        name=\"item\"\n        :num-shown-buttons\n        :too-many-buttons\n        :reveal-more\n        :option-text\n        :click-option\n        :is-selected\n        :toggle-reveal-more\n      >\n        <div class=\"grid grid-cols-2 gap-x-2.5 gap-y-1.5\">\n          <Button\n            v-for=\"(option, i) in optionsDisplayed.slice(0, numShownButtons)\"\n            :key=\"optionText(option)\"\n            :color=\"isSelected(option) ? 'info' : undefined\"\n            :active=\"isSelected(option)\"\n            :variant=\"isSelected(option) && !multiple ? 'solid' : undefined\"\n            :disabled=\"option.selectable === false || disabled\"\n            :small=\"size === 's'\"\n            rounded\n            class=\"!justify-start\"\n            :class=\"{ '[&_div]:!pointer-events-auto !cursor-not-allowed': option.selectable === false || disabled }\"\n            @click=\"clickOption(option)\"\n          >\n            <div>\n              <Icon\n                v-if=\"multiple && isSelected(option) && option.selectable !== false\"\n                name=\"check\"\n                size=\"s\"\n                style=\"margin: -2px\"\n              />\n            </div>\n            <slot :option :index=\"i\">\n              <Tooltip :text=\"option.info\" class=\"w-full\">\n                {{ optionText(option) }}\n              </Tooltip>\n            </slot>\n          </Button>\n        </div>\n      </slot>\n      <slot name=\"more\" :reveal-more :more :too-many-buttons>\n        <div v-if=\"tooManyButtons\">\n          <Button\n            v-if=\"revealMore\"\n            :small=\"size === 's'\"\n            variant=\"text\"\n            :color=\"black ? 'background' : 'primary'\"\n            rounded\n            @click=\"revealMore = !revealMore\"\n          >\n            Less <Icon name=\"expand_less\" size=\"s\" style=\"margin: -2px\" />\n          </Button>\n          <Button\n            v-else\n            :small=\"size === 's'\"\n            variant=\"text\"\n            rounded\n            :color=\"black ? 'background' : 'primary'\"\n            @click=\"revealMore = !revealMore\"\n          >\n            {{ more }} more <Icon name=\"expand_more\" size=\"s\" style=\"margin: -2px\" />\n          </Button>\n        </div>\n      </slot>\n    </Column>\n    <BaseDropdownDodo\n      v-else-if=\"variant === 'dropdown' || variant === 'dropdownWithChips'\"\n      v-model=\"dropdownActive\"\n      :disabled\n      :more-dropdown-styles\n    >\n      <Field ref=\"elField\" button :disabled>\n        <p v-if=\"currentValues?.length && !alwaysShowPlaceholder\" class=\"dodo-nowrap\">\n          <template v-for=\"(value, i) in currentValues\">\n            <template v-if=\"i\">, </template>\n            <template v-if=\"optionForValue(value)\">\n              <slot :index=\"optionsDisplayed.indexOf(optionForValue(value)!)\" :option=\"optionForValue(value)!\">\n                {{ optionText(optionForValue(value)!) }}\n              </slot>\n            </template>\n            <template v-else>{{ value }}</template>\n          </template>\n        </p>\n        <p v-else class=\"dodo-nowrap dodo-fade-secondary\">\n          {{ placeholderText }}\n        </p>\n        <template #after>\n          <Icon name=\"arrow_drop_down\" />\n        </template>\n      </Field>\n      <template #dropdown>\n        <div class=\"flex flex-col min-h-0 max-h-72\">\n          <div v-if=\"showSearch\" class=\"flex p-2 searchbox\">\n            <TextInput\n              v-model=\"search\"\n              type=\"search\"\n              placeholder=\"Search\"\n              tabindex=\"0\"\n              style=\"flex-grow: 1\"\n              autofocus\n              @keydown.enter.stop.prevent=\"onKeyEnter\"\n              @keydown.esc.stop.prevent=\"onKeyEscapeDown\"\n              @keyup.esc.stop.prevent=\"onKeyEscape\"\n            />\n          </div>\n          <TextInput\n            v-else\n            class=\"h-0 w-0 !min-h-0 !min-w-0 !max-w-0 !p-0 opacity-0\"\n            autofocus\n            @keydown.enter.stop.prevent=\"onKeyEnter\"\n            @keydown.esc.stop.prevent=\"onKeyEscapeDown\"\n            @keyup.esc.stop.prevent=\"onKeyEscape\"\n          />\n          <ScrollContainer>\n            <Spinner v-if=\"loading\" />\n            <template v-for=\"(option, i) in [...filteredOptions, ...noResultsOption]\" :key=\"`${option.value}`\">\n              <slot name=\"item\" :item=\"option\">\n                <BaseExpandable\n                  v-if=\"option.children\"\n                  :id=\"`menuItem-${i}`\"\n                  height-collapsed=\"max-h-0\"\n                  class=\"[&>h3]:h-auto [&>h3]:text-sm\"\n                  :class=\"{ '!cursor-not-allowed': option.selectable === false }\"\n                  :expanded=\"expanded.includes(option.value) || !!search\"\n                  @update:expanded=\"\n                    expanded.includes(option.value)\n                      ? (expanded = expanded.filter((x) => x !== option.value))\n                      : expanded.push(option.value)\n                  \"\n                >\n                  <template #trigger>\n                    <span>\n                      <!-- no-op -->\n                    </span>\n                  </template>\n                  <template #title>\n                    <slot :index=\"i\" :option=\"option\">\n                      <Tooltip :text=\"option.info\" side=\"top\" class=\"!flex w-full justify-between\">\n                        <div>\n                          {{ optionText(option) }}\n                          <Icon v-if=\"option.info\" name=\"help\" />\n                        </div>\n                        <div>\n                          <Icon\n                            name=\"arrow_drop_down\"\n                            class=\"mr-1.5\"\n                            :class=\"{ '-rotate-90': !expanded.includes(option.value) && !search }\"\n                            size=\"l\"\n                          />\n                        </div>\n                      </Tooltip>\n                    </slot>\n                  </template>\n                  <template #content>\n                    <MenuItem\n                      v-for=\"(child, j) in option.children.filter(\n                        (c) =>\n                          !search ||\n                          `${c.value}|${c.label}|${c.searchableAlternatives?.join(' ') ?? ''}`\n                            .toLowerCase()\n                            .includes(search.toLowerCase()),\n                      )\"\n                      :key=\"child.value as PropertyKey\"\n                      class=\"!pl-8\"\n                      :data-selectactive=\"currentValues?.includes(child.value) ? 'true' : undefined\"\n                      :active=\"currentValues?.includes(child.value)\"\n                      :class=\"{ 'bg-gray-50': j === keyFocus, '!cursor-not-allowed': child.selectable === false }\"\n                      @click.stop.prevent=\"clickOption(child)\"\n                    >\n                      <slot :index=\"j\" :option=\"child\">\n                        <Tooltip :text=\"child.info\" side=\"top\" class=\"w-full !flex\">\n                          {{ optionText(child) }}\n                          <Icon v-if=\"child.info\" name=\"help\" />\n                          <div class=\"ml-auto\">\n                            <template v-if=\"multiple\">\n                              <Icon v-if=\"isSelected(child)\" name=\"check_box\" />\n                              <Icon v-else name=\"check_box_outline_blank\" />\n                            </template>\n                            <template v-else-if=\"child.selectable !== false\">\n                              <Icon v-if=\"isSelected(child)\" name=\"radio_button_checked\" />\n                              <Icon v-else name=\"radio_button_unchecked\" />\n                            </template>\n                          </div>\n                        </Tooltip>\n                      </slot>\n                    </MenuItem>\n                  </template>\n                </BaseExpandable>\n                <MenuItem\n                  v-else\n                  :id=\"`menuItem-${i}`\"\n                  :data-selectactive=\"currentValues?.includes(option.value) ? 'true' : undefined\"\n                  :active=\"currentValues?.includes(option.value)\"\n                  :class=\"{ 'bg-gray-50': i === keyFocus, '!cursor-not-allowed': option.selectable === false }\"\n                  @click=\"clickOption(option)\"\n                >\n                  <slot :index=\"i\" :option=\"option\">\n                    <Tooltip :text=\"option.info\" side=\"top\" class=\"w-full !flex\">\n                      {{ optionText(option) }}\n                      <Icon v-if=\"option.info\" name=\"help\" />\n                      <div class=\"ml-auto\">\n                        <template v-if=\"multiple\">\n                          <Icon v-if=\"isSelected(option)\" name=\"check_box\" />\n                          <Icon v-else name=\"check_box_outline_blank\" />\n                        </template>\n                        <template v-else-if=\"option.selectable !== false\">\n                          <Icon v-if=\"isSelected(option)\" name=\"radio_button_checked\" />\n                          <Icon v-else name=\"radio_button_unchecked\" />\n                        </template>\n                      </div>\n                    </Tooltip>\n                  </slot>\n                </MenuItem>\n              </slot>\n            </template>\n          </ScrollContainer>\n        </div>\n      </template>\n    </BaseDropdownDodo>\n    <Column v-else-if=\"variant === 'chips'\" align=\"center\" class=\"mt-1\">\n      <slot\n        name=\"itemChips\"\n        :num-shown-buttons-chips\n        :too-many-buttons-chips\n        :reveal-more-chips\n        :click-option-chips\n        :option-text\n        :is-selected\n        :toggle-reveal-more-chips\n      >\n        <div class=\"grid grid-cols-2 gap-x-2.5 gap-y-1.5\">\n          <Button\n            v-for=\"(option, i) in optionsFlattened\n              .filter((o) => (Array.isArray(modelValue) ? modelValue.includes(o.value) : modelValue === o.value))\n              .slice(0, numShownButtonsChips)\"\n            :key=\"optionText(option)\"\n            color=\"info\"\n            active\n            :variant=\"!multiple ? 'solid' : undefined\"\n            :disabled=\"option.selectable === false || disabled\"\n            :small=\"size === 's'\"\n            rounded\n            class=\"!justify-start !text-white !bg-black\"\n            :class=\"{ '[&_div]:!pointer-events-auto !cursor-not-allowed': option.selectable === false || disabled }\"\n            @click.stop.prevent=\"clickOptionChips(option)\"\n          >\n            <div>\n              <Icon v-if=\"multiple && option.selectable !== false\" name=\"check\" size=\"s\" class=\"mt-1\" />\n            </div>\n            <slot :option :index=\"i\">\n              <Tooltip :text=\"option.info\" class=\"w-full\">\n                {{ optionText(option) }}\n              </Tooltip>\n            </slot>\n          </Button>\n        </div>\n      </slot>\n\n      <slot name=\"moreChips\" :reveal-more-chips :more-chips :too-many-buttons-chips>\n        <div v-if=\"tooManyButtonsChips\">\n          <Button\n            v-if=\"revealMoreChips\"\n            :small=\"size === 's'\"\n            variant=\"text\"\n            rounded\n            :color=\"black ? 'background' : 'primary'\"\n            @click=\"revealMoreChips = !revealMoreChips\"\n          >\n            Less <Icon name=\"expand_less\" size=\"s\" style=\"margin: -2px\" />\n          </Button>\n          <Button\n            v-else\n            :small=\"size === 's'\"\n            variant=\"text\"\n            :color=\"black ? 'background' : 'primary'\"\n            rounded\n            @click=\"revealMoreChips = !revealMoreChips\"\n          >\n            {{ moreChips }} more <Icon name=\"expand_more\" size=\"s\" style=\"margin: -2px\" />\n          </Button>\n        </div>\n      </slot>\n    </Column>\n\n    <!-- @vue-expect-error typescript error with generic component type -->\n    <BaseSelect\n      v-if=\"variant === 'dropdownWithChips'\"\n      v-bind=\"props\"\n      variant=\"chips\"\n      @update:model-value=\"(e) => emit('update:modelValue', e)\"\n    />\n  </div>\n</template>\n<script lang=\"ts\" setup generic=\"T\">\nimport { computed, onMounted, Ref, ref, watch } from 'vue'\nimport { onKeyStroke, useElementBounding } from '@vueuse/core'\nimport { Button, Column, Icon, MenuItem, ScrollContainer, TextInput, Field, Tooltip, Spinner } from '@madxnl/dodo-ui'\nimport BaseDropdownDodo from './BaseDropdownDodo.vue'\nimport BaseExpandable from './BaseExpandable.vue'\nimport { LabeledValueWithOptions } from '.'\n\ntype MaybeArray<TT> = TT | TT[]\n\ntype VariantType = 'buttons' | 'dropdown' | 'dropdownWithChips' | 'chips'\n\nconst props = withDefaults(\n  defineProps<{\n    options: LabeledValueWithOptions<T>[]\n    modelValue?: MaybeArray<T>\n    disabled?: boolean\n    placeholder?: string\n    multiple?: boolean\n    variant?: VariantType\n    size?: 's'\n    loading?: boolean\n    searchable?: boolean\n    alwaysShowPlaceholder?: boolean\n    restrictDropdownWidth?: boolean\n  }>(),\n  {\n    modelValue: undefined,\n    placeholder: undefined,\n    disabled: false,\n    multiple: false,\n    variant: 'buttons',\n    size: undefined,\n    loading: false,\n    searchable: false,\n    alwaysShowPlaceholder: false,\n    restrictDropdownWidth: false,\n  },\n)\n\nconst search = defineModel<string>('search', { default: '' })\nconst dropdownActive = defineModel<boolean>('dropdownActive', { default: false, required: false })\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: MaybeArray<T>): void\n}>()\n\nconst black = ref(false)\nconst noResults = ref(false)\nconst expanded = ref<T[]>([]) as Ref<T[]>\nconst elField = ref()\nconst { width: fieldWidth } = useElementBounding(elField)\nconst moreDropdownStyles = computed(() => (props.restrictDropdownWidth ? `width: ${fieldWidth.value}px` : ''))\n\nonMounted(() => {\n  black.value = localStorage.getItem('theme') === 'dark'\n})\n\nconst noResultsOption = computed<LabeledValueWithOptions<T>[]>(() => {\n  if (noResults.value) {\n    return [{ label: 'No results found', value: undefined as T, selectable: false }]\n  }\n\n  return []\n})\n\nconst optionsFlattened = computed(() => {\n  return props.options.reduce<LabeledValueWithOptions<T>[]>((acc, o) => {\n    if (o.children) {\n      return [...acc, ...o.children]\n    }\n\n    return [...acc, o]\n  }, [])\n})\n\nwatch(\n  () => props.loading,\n  (n, o) => {\n    if (n === false && o === true && search.value.length && filteredOptions.value.length === 0) {\n      noResults.value = true\n    }\n  },\n)\n\nwatch(search, () => {\n  noResults.value = false\n})\n\nconst optionsDisplayed = computed(() => {\n  if (props.variant === 'buttons') return props.options\n\n  if (props.options.length <= 24) return props.options\n\n  const options = props.options.slice(0, 25)\n\n  return [\n    ...options,\n    { label: 'Use the searchbar to find relevant results...', value: undefined as T, selectable: false },\n  ]\n})\n\nconst currentValues = computed(() => {\n  if (!props.modelValue) return undefined\n  if (!Array.isArray(props.modelValue)) return [props.modelValue]\n\n  const values = props.modelValue\n\n  return values.filter((value: T) => optionForValue(value))\n})\n\nconst maxButtons = 12\nconst revealMore = ref(false)\nconst revealMoreChips = ref(false)\nconst tooManyButtons = computed(() => optionsDisplayed.value.length > maxButtons)\nconst tooManyButtonsChips = computed(() =>\n  Array.isArray(props.modelValue) ? props.modelValue.length > maxButtons : false,\n)\nconst numShownButtons = computed(() => (tooManyButtons.value && !revealMore.value ? 6 : optionsDisplayed.value.length))\nconst numShownButtonsChips = computed(() =>\n  tooManyButtonsChips.value && !revealMoreChips.value\n    ? 6\n    : Array.isArray(props.modelValue)\n      ? props.modelValue.length\n      : 1,\n)\nconst more = computed(() => optionsDisplayed.value.length - numShownButtons.value)\nconst moreChips = computed(() =>\n  Array.isArray(props.modelValue) ? props.modelValue.length - numShownButtonsChips.value : 0,\n)\n\nconst showSearch = computed(() => {\n  return props.searchable || search.value || optionsDisplayed.value.length >= 10\n})\n\nconst filteredOptions = computed(() => {\n  if (!search.value.length) {\n    if (!props.multiple) return optionsDisplayed.value\n\n    const selected = currentValues.value\n      ? props.options.filter((x) =>\n          currentValues.value?.find((y) => compareValue(x, y) || x.children?.some((c) => compareValue(c, y))),\n        )\n      : []\n\n    return selected.concat(optionsDisplayed.value.filter((x) => !selected.some((y) => compareValue(x, y.value))))\n  }\n\n  const s = search.value.toLowerCase()\n  const optionsMatched = props.options.filter(\n    (o) =>\n      `${o.value}|${o.label}|${o.searchableAlternatives?.join(' ') ?? ''}`.toLowerCase().includes(s) ||\n      o.children?.some((c) =>\n        `${c.value}|${c.label}|${c.searchableAlternatives?.join(' ') ?? ''}`.toLowerCase().includes(s),\n      ),\n  )\n\n  if (!props.multiple) return optionsMatched.slice(0, 25)\n\n  const selected = currentValues.value\n    ? optionsMatched.filter((x) => currentValues.value?.find((y) => compareValue(x, y)))\n    : []\n  const unselected = optionsMatched.filter((x) => !selected.some((y) => compareValue(x, y.value)))\n\n  return selected.concat(unselected.slice(0, 25))\n})\n\nconst placeholderText = computed(() => {\n  if (props.placeholder) return props.placeholder\n\n  return props.multiple ? 'Select one or more' : 'Select one'\n})\n\nfunction optionForValue(value: T) {\n  return optionsFlattened.value.find((o) => compareValue(o, value))\n}\n\nfunction clickOption(option: LabeledValueWithOptions<T>) {\n  if (option.selectable === false) return\n  if (option.children) {\n    expanded.value.includes(option.value)\n      ? (expanded.value = expanded.value.filter((x) => x !== option.value))\n      : expanded.value.push(option.value)\n    return\n  }\n\n  let newValue: MaybeArray<T> = option.value\n  if (props.multiple) {\n    if (currentValues.value?.includes(newValue)) {\n      newValue = currentValues.value.filter((x: T) => !compareValue(option, x))\n    } else if (currentValues.value) {\n      newValue = [...currentValues.value, option.value]\n    } else {\n      newValue = option.value\n    }\n  } else {\n    dropdownActive.value = false\n  }\n  emit('update:modelValue', newValue)\n}\n\nfunction compareValue(option: LabeledValueWithOptions<T>, value: T) {\n  return option.value === value\n}\n\nfunction optionText(option: LabeledValueWithOptions<T>): string {\n  return option.label || `${option.value}`\n}\n\nfunction isSelected(option: LabeledValueWithOptions<T>) {\n  return currentValues.value?.some((x: T) => compareValue(option, x))\n}\n\nfunction toggleRevealMore() {\n  revealMore.value = !revealMore.value\n}\n\nfunction toggleRevealMoreChips() {\n  revealMoreChips.value = !revealMoreChips.value\n}\nfunction clickOptionChips(o: LabeledValueWithOptions<T>) {\n  Array.isArray(props.modelValue)\n    ? emit(\n        'update:modelValue',\n        props.modelValue.filter((v) => o.value !== v),\n      )\n    : emit('update:modelValue', undefined as T)\n}\n\nconst keyFocus = ref<number>(0)\n\nonKeyStroke('ArrowDown', (e) => {\n  keyFocus.value = (keyFocus.value + 1) % filteredOptions.value.length\n\n  document.getElementById(`menuItem-${keyFocus.value}`)?.scrollIntoView({ block: 'center' })\n})\n\nonKeyStroke('ArrowUp', (e) => {\n  keyFocus.value--\n\n  if (keyFocus.value < 0) keyFocus.value = filteredOptions.value.length - 1\n\n  document.getElementById(`menuItem-${keyFocus.value}`)?.scrollIntoView({ block: 'center' })\n})\n\nfunction onKeyEnter(e: any) {\n  const o = filteredOptions.value[keyFocus.value]\n  if (!o) return\n\n  clickOption(o)\n}\n\nfunction onKeyEscapeDown(e: any) {\n  // no-op\n}\n\nfunction onKeyEscape(e: any) {\n  if (search.value !== '') {\n    search.value = ''\n\n    return\n  }\n\n  dropdownActive.value = false\n}\n</script>\n\n<style lang=\"postcss\" scoped>\n.searchbox {\n  border-bottom: 1px solid color-mix(in oklch, var(--dodo-color-text) 20%, transparent);\n}\n</style>\n"],"names":["props","__props","emit","__emit","active","ref","dropdownStyles","content","el","watch","toggle","onBeforeUnmount","show","nextTick","updateUntilInactive","onWindowClick","onClick","e","onMouseOver","onMouseLeave","cur","clickOnTrigger","_a","clickOnDropdown","_b","contentEl","contentWidth","buttonRect","windowWidth","windowHeight","dropdownAbove","left","maxWidth","styles","provide","dropdownServiceKey","maxButtons","search","_useModel","dropdownActive","black","noResults","expanded","elField","fieldWidth","useElementBounding","moreDropdownStyles","computed","onMounted","noResultsOption","optionsFlattened","acc","o","n","filteredOptions","optionsDisplayed","currentValues","value","optionForValue","revealMore","revealMoreChips","tooManyButtons","tooManyButtonsChips","numShownButtons","numShownButtonsChips","more","moreChips","showSearch","selected","x","y","compareValue","c","s","optionsMatched","unselected","placeholderText","clickOption","option","newValue","optionText","isSelected","toggleRevealMore","toggleRevealMoreChips","clickOptionChips","v","keyFocus","onKeyStroke","onKeyEnter","onKeyEscapeDown","onKeyEscape"],"mappings":"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"}