{"version":3,"file":"mODqGdsK.js","sources":["../../../../../../../app/components/common/CiAccordion/CiAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// icons\nimport { faChevronDown } from '@fortawesome/pro-regular-svg-icons';\n\n// components\nimport AutoHeightTransition from './AutoHeightTransition.vue';\n\n/********************\n * PROPS & EMITS    *\n ********************/\nexport interface CiAccordionProps {\n  isLast?: boolean;\n  layout?: 'default' | 'primary';\n  mq?: 'default' | 'sm' | 'md' | 'lg';\n  removeCollapsedMarkup?: boolean;\n  scrollOffset?: number;\n  scrollToItem?: boolean;\n  show?: boolean;\n  smallIcon?: boolean;\n}\nconst props = withDefaults(defineProps<CiAccordionProps>(), {\n  isLast: false,\n  layout: 'default',\n  mq: 'default',\n  removeCollapsedMarkup: false,\n  scrollOffset: 0,\n  scrollToItem: true,\n  show: false,\n  smallIcon: false,\n});\n\nconst emit = defineEmits<{\n  'accordion-toggle': [value: boolean];\n}>();\n\n/********************\n * COMPOSITIONS      *\n ********************/\nconst viewport = useViewport();\n\n/********************\n * REFS & VARS      *\n ********************/\nconst root = ref<HTMLElement | null>(null);\nconst open = computed({\n  // getter\n  get() {\n    if (props.mq === 'default') {\n      return props.show;\n    } else {\n      return viewport.isLessThan(props.mq) ? props.show : true;\n    }\n  },\n  // setter\n  set(newValue) {\n    return newValue;\n  },\n});\n\nconst showOpenStyles = computed({\n  // getter\n  get() {\n    if (props.mq === 'default') {\n      return props.layout !== 'default';\n    } else {\n      return viewport.isLessThan(props.mq) ? props.show : false;\n    }\n  },\n  // setter\n  set(newValue) {\n    return newValue;\n  },\n});\n\nconst classMapping = {\n  default: {\n    header: {\n      default: 'cursor-pointer',\n      open: 'cursor-pointer',\n    },\n    headline: '[&>*]:max-md:text-base [&>*]:max-md:font-medium [&>*]:max-md:leading-6',\n    body: {\n      default: '',\n      open: '',\n    },\n  },\n  sm: {\n    header: {\n      default: 'cursor-pointer sm:!cursor-auto sm:relative sm:border-b-0',\n      open: 'cursor-pointer',\n    },\n    headline: '[&>*]:max-sm:text-base [&>*]:max-sm:font-medium [&>*]:max-sm:leading-6',\n    body: {\n      default: 'sm:!block sm:h-auto sm:overflow-visible',\n      open: 'border-b-0',\n    },\n  },\n  md: {\n    header: {\n      default: 'cursor-pointer md:!cursor-auto md:relative md:border-b-0',\n      open: 'cursor-pointer',\n    },\n    headline: '[&>*]:max-md:text-base [&>*]:max-md:font-medium [&>*]:max-md:leading-6',\n    body: {\n      default: 'md:!block sm:h-auto md:overflow-visible',\n      open: 'border-b-0',\n    },\n  },\n  lg: {\n    header: {\n      default: 'cursor-pointer lg:!cursor-auto lg:relative lg:border-b-0',\n      open: 'cursor-pointer',\n    },\n    headline: '[&>*]:max-lg:text-base [&>*]:max-lg:font-medium [&>*]:max-lg:leading-6',\n    body: {\n      default: 'lg:!block lg:h-auto lg:overflow-visible',\n      open: 'border-b-0',\n    },\n  },\n};\n\nconst styleMapping = {\n  default: {\n    header: {\n      default: 'border-t border-[#adb5bd]',\n      open: 'border-t border-[#adb5bd]',\n    },\n    icon: {\n      default: 'fill-primary',\n      open: 'fill-primary',\n    },\n    body: {\n      default: '',\n      open: props.isLast ? 'border-b border-[#adb5bd]' : '',\n    },\n  },\n  primary: {\n    header: {\n      default: 'border-b border-[#adb5bd]',\n      open: 'bg-primary text-white',\n    },\n    icon: {\n      default: 'fill-primary',\n      open: 'fill-white',\n    },\n    body: {\n      default: '',\n      open: props.isLast ? '' : 'border-b border-[#adb5bd]',\n    },\n  },\n};\n\nconst bodyLayoutClass = computed(() => {\n  return styleMapping[props.layout].body.default;\n});\n\nconst iconLayoutClass = computed(() => {\n  return styleMapping[props.layout].icon.default;\n});\n\nconst iconOpenLayoutClass = computed(() => {\n  return styleMapping[props.layout].icon.open;\n});\n\nconst bodyOpenLayoutClass = computed(() => {\n  return styleMapping[props.layout].body.open;\n});\n\nconst bodyClass = computed(() => {\n  return classMapping[props.mq].body.default;\n});\n\nconst headlineClass = computed(() => {\n  return classMapping[props.mq].headline;\n});\n\nconst bodyOpenClass = computed(() => {\n  return classMapping[props.mq].body.open;\n});\n\nconst headerLayoutClass = computed(() => {\n  return styleMapping[props.layout].header.default;\n});\n\nconst headerOpenLayoutClass = computed(() => {\n  return styleMapping[props.layout].header.open;\n});\n\nconst headerClass = computed(() => {\n  return classMapping[props.mq].header.default;\n});\n\nconst headerOpenClass = computed(() => {\n  return classMapping[props.mq].header.open;\n});\n\n/********************\n * WATCHER          *\n ********************/\nwatch(() => props.show, onShowChange);\n\n/********************\n * FUNCTIONS        *\n ********************/\nfunction toggle(): void {\n  if (props.mq === 'default' || viewport.isLessThan(props.mq)) {\n    emit('accordion-toggle', !props.show);\n  }\n}\n\nfunction scrollToElem(): void {\n  const topPos = (root.value as HTMLElement)?.getBoundingClientRect().top + window.scrollY;\n  window.scroll({ top: topPos - props.scrollOffset, behavior: 'smooth' });\n}\n\nfunction onShowChange(isOpen: boolean): void {\n  if (isOpen && props.scrollToItem) {\n    nextTick(() => {\n      setTimeout(() => {\n        scrollToElem();\n      }, 300);\n    });\n  }\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ open: props.show }\"\n    class=\"accordion w-full\"\n  >\n    <div\n      class=\"accordion__header\"\n      :class=\"[\n        props.show && showOpenStyles ? headerOpenLayoutClass : headerLayoutClass,\n        props.show && showOpenStyles ? headerOpenClass : headerClass,\n      ]\"\n      @click=\"toggle\"\n    >\n      <div class=\"container\">\n        <div class=\"row\">\n          <div\n            :class=\"[\n              headlineClass,\n              props.smallIcon ? 'col-10 col-sm-11' : 'col-10',\n              mq ? `col-${props.mq}-12 ${props.mq}:!p-0` : null,\n            ]\"\n          >\n            <slot name=\"header\" />\n          </div>\n          <div\n            class=\"flex justify-end\"\n            :class=\"[props.smallIcon ? 'col-2 col-sm-1' : 'col-2', props.mq ? `${props.mq}:hidden` : null]\"\n          >\n            <CiAwesomeIcon\n              :class=\"[props.show ? iconOpenLayoutClass : iconLayoutClass, { 'rotate-180': props.show }]\"\n              :icon=\"faChevronDown\"\n              class=\"accordion__icon rotate-0 self-center transition-transform duration-[250ms] ease-in\"\n              ratio=\"0.75\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <auto-height-transition>\n      <template v-if=\"!removeCollapsedMarkup\">\n        <div\n          v-show=\"open\"\n          class=\"accordion__body\"\n          :class=\"[\n            props.show && showOpenStyles ? bodyOpenLayoutClass : bodyLayoutClass,\n            props.show && showOpenStyles ? bodyOpenClass : bodyClass,\n            { 'visible relative h-auto': open },\n          ]\"\n        >\n          <slot />\n        </div>\n      </template>\n\n      <template v-else>\n        <div\n          v-if=\"open\"\n          class=\"accordion__body\"\n          :class=\"[\n            props.show && showOpenStyles ? bodyOpenLayoutClass : bodyLayoutClass,\n            props.show && showOpenStyles ? bodyOpenClass : bodyClass,\n            { 'visible relative h-auto': open },\n          ]\"\n        >\n          <slot />\n        </div>\n      </template>\n    </auto-height-transition>\n  </div>\n</template>\n\n<style></style>\n"],"names":["props","__props","emit","__emit","viewport","useViewport","root","ref","open","computed","newValue","showOpenStyles","classMapping","styleMapping","bodyLayoutClass","iconLayoutClass","iconOpenLayoutClass","bodyOpenLayoutClass","bodyClass","headlineClass","bodyOpenClass","headerLayoutClass","headerOpenLayoutClass","headerClass","headerOpenClass","watch","onShowChange","toggle","scrollToElem","topPos","_a","isOpen","nextTick"],"mappings":"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"}