{"version":3,"file":"Popover-DCah8jyJ.js","sources":["../../../../../../frontend/src/components/Popover.vue"],"sourcesContent":["<template lang=\"pug\">\ndiv(ref='container' class='popover-container')\n  slot(name='default' :toggle='toggle' :visible='isVisible')\nteleport(:to='teleportTarget')\n  transition(:name='transition')\n    div(v-if='isVisible' ref='content' v-bind='$attrs' :class='cssClasses' :style='floatingStyles' class='popover')\n      div(v-if='position !== false' ref='floatingArrow' :style='arrowStyles' class='popover__arrow')\n      btn(v-if='closeable' icon='x' small plain :data-tooltip='tooltipClose' data-test-btn='tooltip-close' class='popover__close' @click='close')\n      div(v-if='$slots.title' class='popover__title')\n        slot(name='title')\n      div(class='popover__text')\n        slot(name='content' :close='close')\n</template>\n\n<script lang=\"ts\">\nimport { type Placement } from '@floating-ui/core'\nimport { useFloating, arrow, autoPlacement, shift, offset, autoUpdate, type Side } from '@floating-ui/vue'\nimport { onClickOutside, onKeyStroke } from '@vueuse/core'\nimport {\n  defineComponent,\n  type PropType,\n  ref,\n  computed,\n  type SetupContext,\n  type StyleValue,\n  onMounted,\n  watch,\n} from 'vue'\n\nexport type PopoverType = 'default' | 'dark' | 'success' | 'danger'\nexport type PopoverSize = 'sm' | 'base' | 'lg'\nconst STATIC_SIDES: Record<Side, Side> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\nconst Popover = defineComponent({\n  inheritAttrs: false,\n  props: {\n    modelValue: { type: Boolean },\n    dark: Boolean,\n    teleport: Boolean,\n    tooltipClose: String,\n    teleportTarget: { type: String, default: 'main' },\n    offset: { type: Number, default: 10 },\n    target: Object as PropType<HTMLElement>,\n    closeOnClickOutside: Boolean,\n    closeable: { type: Boolean, default: true },\n    transition: { type: String, default: 'fade' },\n    indented: Boolean,\n    flip: { type: Boolean, default: true },\n    padding: { type: Number, default: 20 },\n    scrollIntoView: { type: Boolean, default: true },\n    position: { type: [String, Boolean] as PropType<Placement | boolean | undefined>, default: undefined },\n    size: { type: String as PropType<PopoverSize>, default: 'base' },\n    type: { type: String as PropType<PopoverType>, default: 'default' },\n    allowedPlacements: { type: Array as PropType<Placement[]> },\n  },\n  setup(props, context: SetupContext) {\n    const visible = ref(false)\n    const content = ref<null | HTMLElement>(null)\n    const container = ref<null | HTMLElement>(null)\n    const floatingArrow = ref<null | HTMLElement>(null)\n    const actualTarget = computed(() => (props.position === false ? null : props.target || container.value))\n    const isVisible = computed(() => props.modelValue)\n\n    const { floatingStyles, middlewareData, placement } = useFloating(actualTarget, content, {\n      whileElementsMounted: autoUpdate,\n      ...(props.position ? { placement: props.position as Placement } : {}),\n      middleware: [\n        ...(!props.position\n          ? [props.allowedPlacements ? autoPlacement({ allowedPlacements: props.allowedPlacements! }) : autoPlacement()]\n          : []),\n        shift({ padding: 20, boundary: document.querySelector('main')! }),\n        offset(props.offset),\n        arrow({ element: floatingArrow }),\n      ],\n    })\n    const arrowStyles = computed<StyleValue>(() => {\n      const staticSide = STATIC_SIDES[placement.value.split('-')[0] as Side]\n      return {\n        position: 'absolute',\n        visibility: 'visible',\n        left:\n          middlewareData.value.arrow?.x != null && staticSide !== 'right' ? `${middlewareData.value.arrow.x}px` : '',\n        top:\n          middlewareData.value.arrow?.y != null && staticSide !== 'bottom' ? `${middlewareData.value.arrow.y}px` : '',\n        [staticSide]: '-6px',\n      }\n    })\n\n    const scrollIntoViewIfAllowed = () =>\n      props.modelValue &&\n      content.value &&\n      setTimeout(() => content.value?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' }), 300)\n\n    onMounted(() => {\n      if (props.scrollIntoView) {\n        scrollIntoViewIfAllowed()\n        watch(() => [actualTarget.value, props.modelValue], scrollIntoViewIfAllowed)\n      }\n    })\n\n    const close = () => {\n      context.emit('update:modelValue', visible.value)\n      context.emit('onClose', visible.value)\n    }\n\n    const open = () => {\n      context.emit('update:modelValue', visible.value)\n      context.emit('onOpen', visible.value)\n    }\n\n    const toggle = () => (props.modelValue ? close() : open())\n\n    onKeyStroke('Escape', () => close())\n\n    if (props.closeOnClickOutside) {\n      onClickOutside(content as any, () => close())\n    }\n\n    return {\n      floatingStyles,\n      actualTarget,\n      cssClasses: computed<{ [className: string]: boolean }>(() => ({\n        'popover--indented': props.indented,\n        'popover--centered': props.position === false,\n        [`popover--${props.type}`]: true,\n        [`popover--${props.size}`]: true,\n      })),\n      close,\n      open,\n      floatingArrow,\n      arrowStyles,\n      container,\n      toggle,\n      content,\n      isVisible,\n      visible,\n    }\n  },\n})\nexport default Popover\n</script>\n<style lang=\"stylus\">\n@import '../styles/variables.styl'\n\n:root\n  --popover-bg: #fff\n  --popover-width: 250px\n  --popover-text-color: $color-outer-space\n  --popover-arrow-size: 16px\n  --popover-arrow-offset: 32px\n  --popover-padding: 20px\n  --popover-border-radius: 9px\n  @media (max-width: $breakpoint-xs-max)\n    --popover-arrow-offset: 28px\n    --popover-arrow-size: 10px\n\n.popover\n  --bleed-top: 20px\n  --bleed-right: 20px\n  --bleed-left: 20px\n  --video-border-radius: var(--popover-border-radius) var(--popover-border-radius) 0 0\n  background: var(--popover-bg)\n  box-shadow: 0 0.2px 2.1px rgba(0, 0, 0, 0.022), 0 0.4px 5.2px rgba(0, 0, 0, 0.031), 0 0.9px 10.6px rgba(0, 0, 0, 0.039), 0 1.8px 21.9px rgba(0, 0, 0, 0.048), 0 5px 60px rgba(0, 0, 0, 0.07)\n  box-sizing: border-box\n  pointer-events: all\n  line-height: 1.4\n  position: absolute\n  scroll-margin 120px\n  z-index: 9999\n  border-radius: var(--popover-border-radius)\n  width: var(--popover-width)\n  max-width: calc(100vw - 30px)\n  &__arrow\n    visibility: hidden\n    ~/__content--centered &\n      display: none\n    &, &:before\n      position: absolute\n      width: var(--popover-arrow-size)\n      height: var(--popover-arrow-size)\n      z-index: -1\n    &:before\n      background: var(--popover-bg)\n      visibility: visible\n      content: ''\n      transform: rotate(45deg)\n  &--base\n    --popover-width: 300px\n  &--sm\n    --popover-padding: 12px\n    --popover-arrow-size: 14px\n    --popover-arrow-offset: 26px\n    @media (max-width: $breakpoint-xs-max)\n      --popover-arrow-offset: 18px\n      --popover-arrow-size: 12px\n  &--md\n    --popover-width: 380px\n  &--lg\n    --popover-width: 500px\n    --popover-padding: 42px\n  &__close\n    position: absolute!important\n    top: 16px\n    right: 8px\n    z-index: 99!important\n    color: var(--popover-text-color)!important\n  &__title\n    font-weight: 800\n    padding: var(--popover-padding) var(--popover-padding) 10px var(--popover-padding)\n    font-size: 16px\n    font-family: $font-lato\n    ~/--lg &\n      padding-bottom: 25px\n      font-size: 26px\n      font-weight: 400\n      -webkit-font-smoothing: antialiased\n  &__text,\n  &__title\n    ~/--indented &\n      padding-right: 45px\n  &__text\n    padding: var(--popover-padding) var(--popover-padding) var(--popover-padding) var(--popover-padding)\n    font-size: 16px\n    max-height: 90vh\n    overflow: auto\n    color: var(--popover-text-color)\n    br\n      content: ''\n      height: 10px\n      display: block\n    p\n      font-weight: 400\n      line-height: 1.65\n      font-size: 16px\n    ~/__title + &\n      padding:  0px var(--popover-padding) var(--popover-padding)\n  &--success\n    --popover-bg: var(--green-400)\n    --popover-text-color: #fff\n  &--danger\n    --popover-bg: var(--red-500)\n    --popover-text-color: #fff\n  &--dark\n    --popover-bg: var(--grey-900)\n    --popover-text-color: #fff\n  &--centered\n    box-shadow: -2px 2px 22px rgba(0,0,0,.25)\n    left: 50%!important\n    top: min(40vh, 300px)!important\n    position: fixed!imporetant\n    transform: translateX(-50%) translateY(-50%)!important\n</style>\n"],"names":["STATIC_SIDES","Popover","defineComponent","props","context","visible","ref","content","container","floatingArrow","actualTarget","computed","isVisible","floatingStyles","middlewareData","placement","useFloating","__spreadProps","__spreadValues","autoUpdate","autoPlacement","shift","offset","arrow","arrowStyles","staticSide","_a","_b","scrollIntoViewIfAllowed","onMounted","watch","close","open","toggle","onKeyStroke","onClickOutside"],"mappings":"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"}