{"version":3,"file":"base_button-86d73140.js","sources":["../../../app/javascript/vuecomponents/base_button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useSlots, computed } from 'vue'\nimport { navigateTo } from '@@/bits/location'\n\nconst props = withDefaults(\n  defineProps<{\n    // Determines if button is disabled\n    disabled?: boolean\n    //  Determines the button's main style theme\n    variation?: string\n    //  Determines the color of button\n    colorScheme?: 'default' | 'black' | 'white' | 'green' | 'orange' | 'grey'\n    // Allows clicking the button navigate to a URL\n    href?: string\n    //  Determines where the url should be opened in\n    hrefTarget?: string\n    //  Determines if text-label should have margin\n    xTextMargin?: boolean\n  }>(),\n  {\n    disabled: false,\n    variation: undefined,\n    colorScheme: 'default',\n    href: undefined,\n    hrefTarget: '_self',\n    xTextMargin: true,\n  },\n)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n  (name: 'click', event: MouseEvent): void\n}>()\n\nconst hasText = computed(() => !!slots.default && slots.default().toString().trim() !== '')\n\nconst hasIcon = computed(() => !!slots.icon)\n\nconst variationClass = computed(() => {\n  switch (props.variation) {\n    case 'contained':\n    case 'flat':\n      return 'flat-button'\n    case 'text':\n      return 'text-button'\n    case 'fat-contained':\n      return 'fat-contained-button'\n    case 'small-contained':\n      return 'small-contained-button'\n    case 'large-contained':\n      return 'large-contained-button'\n    case 'fat-text':\n      return 'fat-text-button'\n    case 'fat-text-lower':\n      return 'fat-text-button lower'\n    case 'bordered-text':\n      return 'fat-text-button bordered-text-button'\n    case 'flat-bordered':\n      return 'flat-button bordered-flat-button'\n    default:\n      return 'text-button'\n  }\n})\n\nconst iconClass = computed(() => {\n  const iconClassesArray: string[] = []\n  if (hasIcon.value) {\n    iconClassesArray.push('icon-button')\n  }\n  if (!hasText.value) {\n    iconClassesArray.push('button-without-text')\n  }\n  if (props.variation === 'bordered-icon') {\n    iconClassesArray.push('bordered-icon-button')\n  }\n  return iconClassesArray.join(' ')\n})\n\nconst colorSchemeClass = computed(() => props.colorScheme + '-color')\n\nconst classNames = computed(() => [\n  'button',\n  !(hasIcon.value && !hasText.value) ? variationClass.value : '',\n  colorSchemeClass.value,\n  iconClass.value,\n  props.xTextMargin ? '' : 'no-text-margin',\n])\n\nfunction click(event): void {\n  if (props.href) {\n    navigateTo(props.href, { target: props.hrefTarget })\n  }\n  emit('click', event)\n}\n</script>\n\n<template>\n  <!--\n    triggered on click\n    @event click\n  -->\n  <button :class=\"classNames\" :disabled=\"disabled\" v-bind=\"$props\" @click=\"click\">\n    <slot name=\"icon\"></slot>\n    <div v-if=\"hasText\" class=\"text-label\"><slot /></div>\n  </button>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '@@/styles/global';\n@import '@@/styles/3/modules/_shadow.scss';\n@import '@@/styles/3/modules/_button.scss';\n@import '@@/styles/3/modules/_button_colors.scss';\n@import '@@/styles/3/modules/_utilities.scss';\n@import '@@/styles/3/modules/_responsive.scss';\n@import '@@/styles/3/partials/fonts/_material_icons.scss';\n\n.button {\n  &[disabled],\n  &:disabled {\n    opacity: 0.26;\n    cursor: not-allowed;\n  }\n}\n\n@mixin fat-button {\n  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, 'Helvetica Neue', sans-serif;\n  font-size: 16px;\n  box-sizing: border-box;\n  font-weight: 600;\n  border: none;\n  border-radius: 16px;\n  padding: 0px 24px;\n  line-height: 42px;\n  transition: all 0.2s;\n  cursor: pointer;\n  text-decoration: none;\n  text-align: center;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  // @include shadow-z2;\n  &[disabled],\n  &:disabled {\n    opacity: 0.26;\n    background: none;\n  }\n}\n.icon-button {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  &[disabled],\n  &:disabled {\n    transform: none;\n    box-shadow: none;\n  }\n}\n.text-label {\n  margin: 0 16px;\n  .no-text-margin & {\n    margin: 0;\n  }\n}\n$grey-button-color: #8b8b8b;\n$white-button-color: #fff;\n$black-button-color: #0f0f0f;\n$grey-800-button-color: #404040;\n$mid-grey-button-color: #646464;\n$light-grey-button-color: rgba(255, 255, 255, 0.7);\n$purple-button-color: #be66e8;\n$orange-button-color: #ff843c;\n$green-button-color: #3bb21e;\n$offwhite-button-color: #f5f5f5;\n.fat-contained-button {\n  @include fat-button;\n  @include hover {\n    transform: translateY(1px);\n    &[disabled],\n    &:disabled {\n      transform: none;\n      box-shadow: none;\n    }\n  }\n  @include focus {\n    transform: translateY(2px);\n  }\n  @include active {\n    transform: translateY(2px);\n  }\n  @include button-colors;\n}\n.large-contained-button {\n  @include fat-button;\n  font-size: 20px;\n  font-weight: 600;\n  padding: 0px 28px;\n  border-radius: 20px;\n  letter-spacing: 0.5px;\n  @include hover {\n    transform: translateY(1px);\n  }\n  @include focus {\n    transform: translateY(2px);\n  }\n  @include active {\n    transform: translateY(2px);\n  }\n  @include button-colors;\n}\n\n.small-contained-button {\n  @include fat-button;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 32px;\n  border-radius: 12px;\n  padding: 0px 20px;\n  @include hover {\n    transform: translateY(1px);\n  }\n  @include focus {\n    transform: translateY(2px);\n  }\n  @include active {\n    transform: translateY(2px);\n  }\n  @include button-colors;\n}\n\n.fat-text-button {\n  @include fat-button;\n  text-transform: uppercase;\n  box-shadow: none;\n  background: none;\n  padding: 0 8px;\n  &.default-color {\n    @include text-button-color($button-color);\n  }\n  &.black-color {\n    @include text-button-color($white-color);\n  }\n  &.white-color {\n    @include text-button-color($white-button-color);\n  }\n  &.grey-color {\n    @include text-button-color($mid-grey-button-color);\n    .dark-mode & {\n      @include text-button-color($light-grey-button-color);\n    }\n  }\n  &.lower {\n    text-transform: none;\n  }\n  &.bordered-text-button {\n    text-transform: none;\n    font-weight: normal;\n    font-size: 14px;\n    line-height: 40px;\n    padding: 0;\n    .text-label {\n      margin: 0;\n    }\n    color: $body-text-color;\n    border-radius: 16px;\n    @include inverse-button-color($offwhite-button-color);\n    @include button-hover-active {\n      @apply bg-grape-500 dark:bg-canary-500;\n      @apply text-white-100 dark:text-highway-100;\n      font-weight: 600;\n    }\n    &.selected {\n      @apply bg-grape-500 dark:bg-canary-500;\n      @apply text-white-100 dark:text-highway-100;\n      font-weight: 600;\n    }\n    .dark-mode & {\n      @apply text-white-100;\n      @include inverse-button-color($grey-800-button-color);\n      @include button-hover-active {\n        @apply bg-canary-500 text-highway-100;\n        font-weight: 600;\n      }\n      &.selected {\n        @apply bg-canary-500 text-highway-100;\n        font-weight: 600;\n      }\n    }\n  }\n}\n.icon-button {\n  * {\n    transition: all 0.2s;\n  }\n  &.default-color {\n    i {\n      @include button-hover-active {\n        color: $text-color;\n      }\n    }\n  }\n  &.white-color {\n    i {\n      @include text-button-color($grey-button-color);\n    }\n  }\n  &.black-color {\n    i {\n      @include button-hover-active {\n        color: $text-color;\n      }\n    }\n  }\n  &.bordered-icon-button {\n    border-radius: 16px;\n    width: 40px;\n    height: 40px;\n    @include inverse-button-color($offwhite-button-color);\n    @include button-hover-active {\n      @apply bg-grape-500 dark:bg-canary-500;\n      i {\n        @apply text-white-100 dark:text-highway-100;\n      }\n    }\n    .dark-mode & {\n      @include inverse-button-color($grey-800-button-color);\n      @include button-hover-active {\n        @apply bg-canary-500;\n        i {\n          @apply text-highway-100;\n        }\n      }\n    }\n  }\n}\n.button-without-text {\n  height: 42px;\n  padding: 0;\n}\n.bordered-flat-button {\n  border-radius: 16px;\n  height: 40px;\n  text-transform: none;\n  padding: 0px 24px;\n  font-size: 16px;\n  .text-label {\n    margin: 0px;\n  }\n}\n\n/**\n * Styling for base_button_list\n*/\n\n@mixin verticalButtonListMember {\n  width: 100%;\n  justify-content: flex-start;\n  margin: 0;\n  border-radius: 0;\n  line-height: 64px;\n  box-shadow: none !important;\n  @include hover {\n    transform: none;\n  }\n  &:first-of-type {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n  }\n  &:last-of-type {\n    border-bottom-left-radius: 16px;\n    border-bottom-right-radius: 16px;\n  }\n  &:not(:first-of-type) {\n    margin-top: 1px;\n    border-top: 1px solid transparent;\n  }\n  .text-label {\n    font-weight: 600;\n  }\n  &:after {\n    content: 'keyboard_arrow_right';\n    @include immaterial-icon;\n    position: absolute;\n    right: 16px;\n    color: $inverse-caption-text-color;\n    display: none;\n  }\n  &.icon-button {\n    i {\n      margin-left: -8px;\n      padding: 6px;\n      border-radius: 12px;\n      background: rgba(255, 255, 255, 0.24);\n    }\n    &.black-color {\n      i {\n        background: lighten($black-button-color, 5%);\n      }\n    }\n    &.white-color {\n      i {\n        background: rgba(0, 0, 0, 0.1);\n      }\n    }\n    &:after {\n      display: block;\n    }\n  }\n  position: relative;\n\n  &.white-color {\n    &:after {\n      color: $caption-text-color;\n    }\n  }\n}\n\n.button-list {\n  .button {\n    margin: 8px;\n  }\n  &.vertical {\n    .button {\n      @include verticalButtonListMember;\n    }\n  }\n  @include respondToPhone {\n    .button {\n      @include verticalButtonListMember;\n    }\n  }\n}\n</style>\n"],"names":["slots","useSlots","hasText","computed","default","toString","trim","hasIcon","icon","variationClass","props","variation","iconClass","iconClassesArray","value","push","join","colorSchemeClass","colorScheme","classNames","xTextMargin","click","event","href","navigateTo","target","hrefTarget","emit"],"mappings":"qpBA6BMA,EAAQC,IAMRC,EAAUC,EAAS,IAAM,CAAC,CAACH,EAAMI,SAAWJ,EAAMI,QAAU,EAAAC,SAAA,EAAWC,SAAW,EAAE,EAEpFC,EAAUJ,EAAS,IAAM,CAAC,CAACH,EAAMQ,IAAI,EAErCC,EAAiBN,EAAS,IAAM,CACpC,OAAQO,EAAMC,UAAW,CACvB,IAAK,YACL,IAAK,OACI,MAAA,cACT,IAAK,OACI,MAAA,cACT,IAAK,gBACI,MAAA,uBACT,IAAK,kBACI,MAAA,yBACT,IAAK,kBACI,MAAA,yBACT,IAAK,WACI,MAAA,kBACT,IAAK,iBACI,MAAA,wBACT,IAAK,gBACI,MAAA,uCACT,IAAK,gBACI,MAAA,mCACT,QACS,MAAA,aACX,CACF,CAAC,EAEKC,EAAYT,EAAS,IAAM,CAC/B,MAAMU,EAA6B,CAAA,EACnC,OAAIN,EAAQO,OACVD,EAAiBE,KAAK,aAAa,EAEhCb,EAAQY,OACXD,EAAiBE,KAAK,qBAAqB,EAEzCL,EAAMC,YAAc,iBACtBE,EAAiBE,KAAK,sBAAsB,EAEvCF,EAAiBG,KAAK,GAAG,CAClC,CAAC,EAEKC,EAAmBd,EAAS,IAAMO,EAAMQ,YAAc,QAAQ,EAE9DC,EAAahB,EAAS,IAAM,CAChC,SACEI,EAAQO,OAAS,CAACZ,EAAQY,MAAgC,GAAvBL,EAAeK,MACpDG,EAAiBH,MACjBF,EAAUE,MACVJ,EAAMU,YAAc,GAAK,gBAAA,CAC1B,EAED,SAASC,EAAMC,EAAa,CACtBZ,EAAMa,MACRC,EAAWd,EAAMa,KAAM,CAAEE,OAAQf,EAAMgB,UAAW,CAAC,EAErDC,EAAK,QAASL,CAAK,CACrB"}