{"version":3,"file":"LikeButton-DFkrvbgE.mjs","names":[],"sources":["../src/components/display/comments/like/LikeButton.vue","../src/components/display/comments/like/LikeButton.vue"],"sourcesContent":["<template>\n  <div>\n    <button\n      class=\"btn-like-comment\"\n      :class=\"{\n        'is-active': isActive,\n        'is-dislike': !like,\n      }\"\n      :title=\"titleButton\"\n      @click=\"clickButton\"\n    >\n      <template v-if=\"like\">\n        <ThumbUpOutlineIcon v-if=\"!isActive\" />\n        <ThumbUpIcon v-else />\n      </template>\n      <template v-else>\n        <ThumbDownOutlineIcon v-if=\"!isActive\" />\n        <ThumbDownIcon v-else />\n      </template>\n    </button>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ThumbUpIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbUp.vue\"),\n);\nconst ThumbDownIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbDown.vue\"),\n);\nconst ThumbUpOutlineIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbUpOutline.vue\"),\n);\nconst ThumbDownOutlineIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbDownOutline.vue\"),\n);\nconst SnackBar = defineAsyncComponent(\n  () => import(\"../../../misc/SnackBar.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  like: { default: true, type: Boolean },\n  isActive: { default: false, type: Boolean },\n  canInteract: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"like-action\"]);\n\n//Data \nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\n\n//Computed\nconst actionName = computed(() => {\n  if (props.like) {\n    return props.isActive ? \"dislike\" : \"like\";\n  }\n  return props.isActive ? \"like\" : \"dislike\";\n});\nconst titleButton = computed(() => props.like ? t(\"Like\") : t(\"Dislike\"));\n\n//Methods\nfunction clickButton() {\n  if (props.canInteract) {\n    emit(\"like-action\", actionName.value);\n  } else {\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t(\"Log in to access this service\"));\n  }\n}\n</script>\n<style lang=\"scss\">\n@use \"sass:color\";\n\n.octopus-app .btn-like-comment {\n  $background-color: var(--octopus-primary);\n\n  &.is-dislike {\n    $background-color: black;\n  }\n\n  position: relative;\n  cursor: pointer;\n  border: none;\n  outline: none;\n  z-index: 1;\n  color: var(--octopus-color-text);\n  font-size: 1.2rem;\n  width: 2.2rem;\n  height: 2.2rem;\n  border-radius: 50%;\n  background: transparent;\n  transition: background 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background: var(--octopus-secondary);\n    color: oklch(from var(--octopus-color-text) calc(l + 0.1) c h);\n  }\n\n  /* Animation */\n  &.is-active {\n    z-index: 2;\n    color: white;\n    background: $background-color;\n    animation: 0.8s;\n\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin-left: -2px;\n      margin-top: -2px;\n      width: 6px;\n      height: 6px;\n      border-radius: 100%;\n      transform: scale(0);\n      color: var(--octopus-color-text);;\n      border: 1px solid transparent;\n      box-shadow:\n        -0.8em 0 0 -2px,\n        0.8em 0 0 -2px,\n        0 -0.8em 0 -2px,\n        0 0.8em 0 -2px,\n        -0.6em -0.6em 0 -2px,\n        -0.6em 0.6em 0 -2px,\n        0.6em -0.6em 0 -2px,\n        0.6em 0.6em 0 -2px;\n    }\n\n    &::before {\n      animation: effect-01-animation 0.8s\n        cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    &::after {\n      animation: effect-02-animation 0.6s\n        cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n  }\n\n  @keyframes effect-01-animation {\n    0% {\n      transform: rotate(-15deg) scale(0);\n    }\n\n    40% {\n      opacity: 1;\n    }\n\n    100% {\n      transform: rotate(-30deg) scale(2.5);\n      opacity: 0;\n    }\n  }\n\n  @keyframes effect-02-animation {\n    0% {\n      transform: rotate(10deg) scale(0);\n    }\n\n    40% {\n      opacity: 1;\n    }\n\n    100% {\n      transform: rotate(30deg) scale(2);\n      opacity: 0;\n    }\n  }\n}\n</style>\n","<template>\n  <div>\n    <button\n      class=\"btn-like-comment\"\n      :class=\"{\n        'is-active': isActive,\n        'is-dislike': !like,\n      }\"\n      :title=\"titleButton\"\n      @click=\"clickButton\"\n    >\n      <template v-if=\"like\">\n        <ThumbUpOutlineIcon v-if=\"!isActive\" />\n        <ThumbUpIcon v-else />\n      </template>\n      <template v-else>\n        <ThumbDownOutlineIcon v-if=\"!isActive\" />\n        <ThumbDownIcon v-else />\n      </template>\n    </button>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ThumbUpIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbUp.vue\"),\n);\nconst ThumbDownIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbDown.vue\"),\n);\nconst ThumbUpOutlineIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbUpOutline.vue\"),\n);\nconst ThumbDownOutlineIcon = defineAsyncComponent(\n  () => import(\"vue-material-design-icons/ThumbDownOutline.vue\"),\n);\nconst SnackBar = defineAsyncComponent(\n  () => import(\"../../../misc/SnackBar.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  like: { default: true, type: Boolean },\n  isActive: { default: false, type: Boolean },\n  canInteract: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"like-action\"]);\n\n//Data \nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\n\n//Computed\nconst actionName = computed(() => {\n  if (props.like) {\n    return props.isActive ? \"dislike\" : \"like\";\n  }\n  return props.isActive ? \"like\" : \"dislike\";\n});\nconst titleButton = computed(() => props.like ? t(\"Like\") : t(\"Dislike\"));\n\n//Methods\nfunction clickButton() {\n  if (props.canInteract) {\n    emit(\"like-action\", actionName.value);\n  } else {\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t(\"Log in to access this service\"));\n  }\n}\n</script>\n<style lang=\"scss\">\n@use \"sass:color\";\n\n.octopus-app .btn-like-comment {\n  $background-color: var(--octopus-primary);\n\n  &.is-dislike {\n    $background-color: black;\n  }\n\n  position: relative;\n  cursor: pointer;\n  border: none;\n  outline: none;\n  z-index: 1;\n  color: var(--octopus-color-text);\n  font-size: 1.2rem;\n  width: 2.2rem;\n  height: 2.2rem;\n  border-radius: 50%;\n  background: transparent;\n  transition: background 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background: var(--octopus-secondary);\n    color: oklch(from var(--octopus-color-text) calc(l + 0.1) c h);\n  }\n\n  /* Animation */\n  &.is-active {\n    z-index: 2;\n    color: white;\n    background: $background-color;\n    animation: 0.8s;\n\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin-left: -2px;\n      margin-top: -2px;\n      width: 6px;\n      height: 6px;\n      border-radius: 100%;\n      transform: scale(0);\n      color: var(--octopus-color-text);;\n      border: 1px solid transparent;\n      box-shadow:\n        -0.8em 0 0 -2px,\n        0.8em 0 0 -2px,\n        0 -0.8em 0 -2px,\n        0 0.8em 0 -2px,\n        -0.6em -0.6em 0 -2px,\n        -0.6em 0.6em 0 -2px,\n        0.6em -0.6em 0 -2px,\n        0.6em 0.6em 0 -2px;\n    }\n\n    &::before {\n      animation: effect-01-animation 0.8s\n        cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    &::after {\n      animation: effect-02-animation 0.6s\n        cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n  }\n\n  @keyframes effect-01-animation {\n    0% {\n      transform: rotate(-15deg) scale(0);\n    }\n\n    40% {\n      opacity: 1;\n    }\n\n    100% {\n      transform: rotate(-30deg) scale(2.5);\n      opacity: 0;\n    }\n  }\n\n  @keyframes effect-02-animation {\n    0% {\n      transform: rotate(10deg) scale(0);\n    }\n\n    40% {\n      opacity: 1;\n    }\n\n    100% {\n      transform: rotate(30deg) scale(2);\n      opacity: 0;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,cAAc,2BACZ,OAAO,wCACf;EACA,MAAM,gBAAgB,2BACd,OAAO,0CACf;EACA,MAAM,qBAAqB,2BACnB,OAAO,+CACf;EACA,MAAM,uBAAuB,2BACrB,OAAO,iDACf;EACA,MAAM,WAAW,2BACT,OAAO,2BAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAGA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAGb,MAAM,cAAc,eAAe,UAAU;EAG7C,MAAM,EAAE,MAAM,QAAQ;EAGtB,MAAM,aAAa,eAAe;GAChC,IAAI,MAAM,MACR,OAAO,MAAM,WAAW,YAAY;GAEtC,OAAO,MAAM,WAAW,SAAS;EACnC,CAAC;EACD,MAAM,cAAc,eAAe,MAAM,OAAO,EAAE,MAAM,IAAI,EAAE,SAAS,CAAC;EAGxE,SAAS,cAAc;GACrB,IAAI,MAAM,aACR,KAAK,eAAe,WAAW,KAAK;QAEpC,CAAC,aAAa,OAAwC,KAAK,EAAE,+BAA+B,CAAC;EAEjG;;;;;;;;;;;;;;;;;;;;;;;;;;qBC1EE,mBAoBM,OAAA,MAAA,CAnBJ,mBAiBS,UAAA;EAhBP,OAAK,eAAA,CAAC,oBAAkB;gBACO,OAAA;kBAAiC,OAAA;;EAI/D,OAAO,OAAA;EACP,SAAO,OAAA;KAEQ,OAAA,QAAA,UAAA,GAAhB,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,CAFkB,OAAA,YAAA,UAAA,GAA3B,YAAuC,OAAA,uBAAA,EAAA,KAAA,EAAA,CAAA,MAAA,UAAA,GACvC,YAAsB,OAAA,gBAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA,MAAA,UAAA,GAExB,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,CAFoB,OAAA,YAAA,UAAA,GAA7B,YAAyC,OAAA,yBAAA,EAAA,KAAA,EAAA,CAAA,MAAA,UAAA,GACzC,YAAwB,OAAA,kBAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA,EAAA,GAAA,IAAA,UAAA,GAG5B,YAAkD,OAAA,aAAA;EAAxC,KAAI;EAAW,UAAS"}