{"version":3,"file":"Accordion-B_zxdYYg.js","sources":["../../../packs/frontend/components/Base/Accordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Collapse } from \"bootstrap\";\nimport { onMounted, watch, ref } from \"vue\";\n\ntype Props = {\n  name: string;\n  parentId?: string;\n  headingSize?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  expanded?: boolean;\n  showChevron?: boolean;\n};\n\nconst props = withDefaults(defineProps<Props>(), {\n  parentId: undefined,\n  headingSize: \"h6\",\n  expanded: false,\n});\n\nconst emit = defineEmits([\"update:expanded\"]);\n\nconst collapseElement = ref<HTMLElement | null>(null);\nlet collapseInstance: Collapse | null = null;\n\nconst isExpanded = ref(props.expanded);\n\nonMounted(() => {\n  if (collapseElement.value) {\n    collapseInstance = new Collapse(collapseElement.value, {\n      toggle: false,\n    });\n\n    collapseElement.value.addEventListener(\"show.bs.collapse\", () => {\n      isExpanded.value = true;\n      emit(\"update:expanded\", true);\n    });\n\n    collapseElement.value.addEventListener(\"hide.bs.collapse\", () => {\n      isExpanded.value = false;\n      emit(\"update:expanded\", false);\n    });\n\n    if (props.expanded) {\n      collapseInstance.show();\n    }\n  }\n});\n\nwatch(\n  () => isExpanded.value,\n  (newValue) => {\n    if (collapseInstance) {\n      if (newValue) {\n        collapseInstance.show();\n      } else {\n        collapseInstance.hide();\n      }\n    }\n  }\n);\n</script>\n\n<template>\n  <div class=\"accordion-item\">\n    <component\n      :is=\"headingSize\"\n      :id=\"`heading-${name}`\"\n      class=\"accordion-header\"\n    >\n      <button\n        class=\"accordion-button\"\n        :class=\"{\n          collapsed: !isExpanded,\n          'd-flex': showChevron,\n          'align-items-center': showChevron,\n          'justify-content-center': showChevron,\n        }\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        :data-bs-target=\"`#collapse-${name}`\"\n        :aria-expanded=\"isExpanded\"\n        :aria-controls=\"`collapse-${name}`\"\n      >\n        <slot name=\"title\" /><BaseIcon\n          v-if=\"showChevron\"\n          icon-name=\"chevron-up\"\n          class=\"accordion-chevron\"\n          :class=\"{ 'accordion-chevron__expanded': isExpanded }\"\n        />\n      </button>\n    </component>\n    <div\n      :id=\"`collapse-${name}`\"\n      ref=\"collapseElement\"\n      class=\"accordion-collapse collapse\"\n      :aria-labelledby=\"`heading-${name}`\"\n      :data-bs-parent=\"parentId ? `#${parentId}` : undefined\"\n    >\n      <div class=\"accordion-body\" :class=\"{ 'mt-4': showChevron }\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" scoped>\n.accordion {\n  &--noborder .accordion-button {\n    padding: $spacer-3 0;\n  }\n\n  &--noborder .accordion-body {\n    padding: 0 0 $spacer-3;\n  }\n\n  &--gray .accordion-body {\n    color: $secondary;\n  }\n\n  .accordion-button {\n    font-weight: 500;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow:\n        $shadow-brand,\n        0 0 0 1px $primary;\n    }\n  }\n\n  .accordion-button:not(.collapsed, :focus-visible) {\n    box-shadow: none;\n  }\n\n  &-chevron {\n    transform: rotate(0deg);\n    transition: transform 0.3s ease;\n    margin-left: $spacer-2;\n\n    &__expanded {\n      transform: rotate(180deg);\n    }\n  }\n\n  &--noborder .accordion-item {\n    border: none;\n    border-top: 1px solid $border-color;\n  }\n\n  &--border {\n    border-radius: $border-radius-lg;\n\n    // border: 1px solid $border-color;\n    box-shadow: $shadow-brand;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","collapseElement","ref","collapseInstance","isExpanded","onMounted","Collapse","watch","newValue"],"mappings":"iiBAYA,MAAMA,EAAQC,EAMRC,EAAOC,EAEPC,EAAkBC,EAAwB,IAAI,EACpD,IAAIC,EAAoC,KAElC,MAAAC,EAAaF,EAAIL,EAAM,QAAQ,EAErC,OAAAQ,EAAU,IAAM,CACVJ,EAAgB,QACCE,EAAA,IAAIG,EAASL,EAAgB,MAAO,CACrD,OAAQ,EAAA,CACT,EAEeA,EAAA,MAAM,iBAAiB,mBAAoB,IAAM,CAC/DG,EAAW,MAAQ,GACnBL,EAAK,kBAAmB,EAAI,CAAA,CAC7B,EAEeE,EAAA,MAAM,iBAAiB,mBAAoB,IAAM,CAC/DG,EAAW,MAAQ,GACnBL,EAAK,kBAAmB,EAAK,CAAA,CAC9B,EAEGF,EAAM,UACRM,EAAiB,KAAK,EAE1B,CACD,EAEDI,EACE,IAAMH,EAAW,MAChBI,GAAa,CACRL,IACEK,EACFL,EAAiB,KAAK,EAEtBA,EAAiB,KAAK,EAE1B,CAEJ"}