{"version":3,"file":"Title-Dm9jryAE.js","sources":["../../../packs/frontend/components/Navbar/Title.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { RouterLinkProps } from \"vue-router\";\n\ntype Props = {\n  title: string;\n  itemTitle?: string;\n  to?: RouterLinkProps[\"to\"];\n  href?: string;\n  hideSm?: boolean;\n};\nconst props = withDefaults(defineProps<Props>(), {\n  itemTitle: undefined,\n  to: undefined,\n  href: undefined,\n  hideSm: false,\n});\n\nconst isBreadcrumb = computed(() => !!props.itemTitle);\nconst hasLongItemTitle = computed(\n  () => !!props.itemTitle && props.itemTitle.length > 37\n);\n\nconst component = computed(() => {\n  if (props.href) {\n    return \"a\";\n  } else {\n    return \"router-link\";\n  }\n});\n\nconst toOrHref = computed(() => {\n  if (props.href) {\n    return { href: props.href };\n  } else if (props.to) {\n    return { to: props.to };\n  }\n  return false;\n});\n</script>\n<template>\n  <div\n    class=\"tools-navbar__title\"\n    data-testid=\"page-title\"\n    :class=\"{ 'd-none d-sm-block': hideSm }\"\n  >\n    <component\n      :is=\"component\"\n      v-if=\"toOrHref && isBreadcrumb\"\n      class=\"tools-navbar__link\"\n      data-testid=\"link-back\"\n      v-bind=\"{ ...$attrs, ...toOrHref }\"\n      :aria-label=\"title\"\n    >\n      <BaseIcon\n        icon-name=\"arrow-left\"\n        class=\"i-lg mt-0 d-sm-none me-3\"\n        color=\"dark\"\n        size=\"md\"\n      />\n      <span class=\"d-none d-sm-block ms-2\">{{ title }}</span>\n    </component>\n    <span v-else class=\"ms-2\">{{ title }}</span>\n\n    <span v-if=\"isBreadcrumb\" class=\"d-none d-sm-block mx-2\">/</span>\n\n    <span\n      v-if=\"itemTitle\"\n      v-tooltip=\"hasLongItemTitle && itemTitle\"\n      class=\"tools-navbar__itemTitle\"\n    >\n      {{ itemTitle }}\n    </span>\n\n    <slot name=\"editItemTitle\"></slot>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.tools-navbar {\n  &__title {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font-size: $font-size-sm;\n    padding: $spacer-1 $spacer-2;\n    padding-left: 0;\n    white-space: nowrap;\n    color: $dark;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &__link {\n    text-decoration: none;\n    color: $color-black;\n\n    &:hover,\n    &:focus {\n      color: $btn-black-hover-color;\n    }\n  }\n\n  &__itemTitle {\n    display: block;\n    max-width: 300px;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"names":["props","__props","isBreadcrumb","computed","hasLongItemTitle","component","toOrHref"],"mappings":"qhBAUA,MAAMA,EAAQC,EAORC,EAAeC,EAAS,IAAM,CAAC,CAACH,EAAM,SAAS,EAC/CI,EAAmBD,EACvB,IAAM,CAAC,CAACH,EAAM,WAAaA,EAAM,UAAU,OAAS,EACtD,EAEMK,EAAYF,EAAS,IACrBH,EAAM,KACD,IAEA,aAEV,EAEKM,EAAWH,EAAS,IACpBH,EAAM,KACD,CAAE,KAAMA,EAAM,IAAK,EACjBA,EAAM,GACR,CAAE,GAAIA,EAAM,EAAG,EAEjB,EACR"}