{"version":3,"file":"ClassicAccordion-S0e-IhFa.mjs","names":[],"sources":["../src/components/misc/ClassicAccordion.vue","../src/components/misc/ClassicAccordion.vue"],"sourcesContent":["<template>\n  <div\n    class=\"my-4\"\n    :class=\"[\n      displayAccordion ? 'octopus-accordion' : '',\n      isOpen ? 'octopus-accordion-open border' : '',\n    ]\"\n  >\n    <template v-if=\"displayAccordion\">\n      <button\n        :id=\"'accordion-' + idComposer\"\n        class=\"w-100 py-2 text-start d-flex flex-nowrap align-items-center\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <AlertIcon v-if=\"isWarning\" class=\"text-danger\" />\n        <img\n          v-if=\"imageUrl\"\n          width=\"30\"\n          height=\"30\"\n          class=\"img-accordion\"\n          :src=\"imageUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        >\n        <span>{{ title }}</span>\n        <slot name=\"afterTitle\" />\n\n        <span\n          v-if=\"subtitle && !isOpen\"\n          class=\"subtitle\"\n        >\n          &nbsp;-&nbsp;{{ subtitle }}\n        </span>\n        <ChevronDownIcon class=\"ms-auto\" :class=\"{ 'arrow-transform': isOpen }\" />\n      </button>\n      <div v-show=\"isOpen\" class=\"body p-2\">\n        <slot />\n      </div>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport { defineAsyncComponent, onMounted, ref, watch } from \"vue\";\nconst AlertIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/Alert.vue\"),\n);\n\n//Props\nconst props = defineProps({\n  title: { default: \"\", type: String },\n  /** Message displayed next to the title when closed */\n  subtitle: { default: undefined, type: String },\n  idComposer: { default: \"\", type: String },\n  isWarning: { default: false, type: Boolean },\n  imageUrl: { default: undefined, type: String },\n  displayAccordion: { default: true, type: Boolean },\n  initOpen: { default: false, type: Boolean },\n});\n\n//Emits\nconst emit = defineEmits([\"open\"]);\n\n//Data\nconst isOpen = ref(false);\n\n//Watch\nwatch(isOpen, () => emit(\"open\", isOpen.value));\n\nonMounted(()=>{\n  isOpen.value = props.initOpen;\n})\n\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-accordion {\n  > button {\n    min-height: 50px;\n    color: var(--octopus-primary);\n    font-size: 0.9rem;\n    border: 1px solid transparent;\n    border-bottom-color: var(--octopus-secondary-darker);\n    font-weight: bold;\n\n    &:hover {\n      border-bottom-color: var(--octopus-color-text);\n    }\n  }\n\n  &:not(.octopus-accordion-open) > button {\n    background: transparent;\n  }\n\n  .body {\n    background: var(--octopus-background);\n  }\n\n  &.octopus-accordion-open {\n    border-radius: var(--octopus-border-radius);\n\n    > button {\n      border-radius: var(--octopus-border-radius) 0 0;\n      background: var(--octopus-border-default);\n      border-color: transparent;\n      color: var(--octopus-color-text);\n    }\n  }\n\n  .img-accordion {\n    width: 30px;\n    height: 30px;\n    margin-right: 1rem;\n    font-size: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .subtitle {\n    color: var(--octopus-gray);\n    font-weight: 600;\n    font-style: italic;\n    font-size: 0.75rem;\n  }\n}\n</style>\n","<template>\n  <div\n    class=\"my-4\"\n    :class=\"[\n      displayAccordion ? 'octopus-accordion' : '',\n      isOpen ? 'octopus-accordion-open border' : '',\n    ]\"\n  >\n    <template v-if=\"displayAccordion\">\n      <button\n        :id=\"'accordion-' + idComposer\"\n        class=\"w-100 py-2 text-start d-flex flex-nowrap align-items-center\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <AlertIcon v-if=\"isWarning\" class=\"text-danger\" />\n        <img\n          v-if=\"imageUrl\"\n          width=\"30\"\n          height=\"30\"\n          class=\"img-accordion\"\n          :src=\"imageUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        >\n        <span>{{ title }}</span>\n        <slot name=\"afterTitle\" />\n\n        <span\n          v-if=\"subtitle && !isOpen\"\n          class=\"subtitle\"\n        >\n          &nbsp;-&nbsp;{{ subtitle }}\n        </span>\n        <ChevronDownIcon class=\"ms-auto\" :class=\"{ 'arrow-transform': isOpen }\" />\n      </button>\n      <div v-show=\"isOpen\" class=\"body p-2\">\n        <slot />\n      </div>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport { defineAsyncComponent, onMounted, ref, watch } from \"vue\";\nconst AlertIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/Alert.vue\"),\n);\n\n//Props\nconst props = defineProps({\n  title: { default: \"\", type: String },\n  /** Message displayed next to the title when closed */\n  subtitle: { default: undefined, type: String },\n  idComposer: { default: \"\", type: String },\n  isWarning: { default: false, type: Boolean },\n  imageUrl: { default: undefined, type: String },\n  displayAccordion: { default: true, type: Boolean },\n  initOpen: { default: false, type: Boolean },\n});\n\n//Emits\nconst emit = defineEmits([\"open\"]);\n\n//Data\nconst isOpen = ref(false);\n\n//Watch\nwatch(isOpen, () => emit(\"open\", isOpen.value));\n\nonMounted(()=>{\n  isOpen.value = props.initOpen;\n})\n\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-accordion {\n  > button {\n    min-height: 50px;\n    color: var(--octopus-primary);\n    font-size: 0.9rem;\n    border: 1px solid transparent;\n    border-bottom-color: var(--octopus-secondary-darker);\n    font-weight: bold;\n\n    &:hover {\n      border-bottom-color: var(--octopus-color-text);\n    }\n  }\n\n  &:not(.octopus-accordion-open) > button {\n    background: transparent;\n  }\n\n  .body {\n    background: var(--octopus-background);\n  }\n\n  &.octopus-accordion-open {\n    border-radius: var(--octopus-border-radius);\n\n    > button {\n      border-radius: var(--octopus-border-radius) 0 0;\n      background: var(--octopus-border-default);\n      border-color: transparent;\n      color: var(--octopus-color-text);\n    }\n  }\n\n  .img-accordion {\n    width: 30px;\n    height: 30px;\n    margin-right: 1rem;\n    font-size: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .subtitle {\n    color: var(--octopus-gray);\n    font-weight: 600;\n    font-style: italic;\n    font-size: 0.75rem;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CA,MAAM,YAAY,2BACV,OAAO,sCACf;EAGA,MAAM,QAAQ;EAYd,MAAM,OAAO;EAGb,MAAM,SAAS,IAAI,KAAK;EAGxB,MAAM,cAAc,KAAK,QAAQ,OAAO,KAAK,CAAC;EAE9C,gBAAc;GACZ,OAAO,QAAQ,MAAM;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;CC5CS,OAAM;;mBAMW,OAAM,WAAU;;qBAlCzC,mBAuCM,OAAA,EAtCJ,OAAK,eAAA,CAAC,QAAM,CACI,OAAA,mBAAgB,sBAAA,IAAmC,OAAA,SAAM,kCAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAKzD,OAAA,oBAAA,UAAA,GAAhB,mBA8BW,UAAA,EAAA,KAAA,EAAA,GAAA,CA7BT,mBAyBS,UAAA;EAxBN,IAAE,eAAiB,OAAA;EACpB,OAAM;EACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,SAAM,CAAI,OAAA;;EAED,OAAA,aAAA,UAAA,GAAjB,YAAkD,OAAA,cAAA;;GAAtB,OAAM;;EAE1B,OAAA,YAAA,UAAA,GADR,mBAQC,OAAA;;GANC,OAAM;GACN,QAAO;GACP,OAAM;GACL,KAAK,OAAA;GACN,eAAY;GACZ,KAAI;;EAEN,mBAAwB,QAAA,MAAA,gBAAf,OAAA,KAAK,GAAA,CAAA;EACd,WAA0B,KAAA,QAAA,cAAA,CAAA,GAAA,KAAA,GAAA,IAAA;EAGlB,OAAA,YAAQ,CAAK,OAAA,UAAA,UAAA,GADrB,mBAKO,QALP,YAGC,eACc,gBAAG,OAAA,QAAQ,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;EAE1B,YAA0E,OAAA,oBAAA,EAAzD,OAAK,eAAA,CAAC,WAAS,EAAA,mBAA8B,OAAA,OAAM,CAAA,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA;mCAEtE,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OADG,OAAA,MAAM,CAAA,CAAA,CAAA,GAAA,EAAA,KAIrB,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,GAAA,KAAA,GAAA,IAAA,CAAA,GAAA,CAAA"}