{"version":3,"file":"WsBtnToggle-9746d5f6.js","sources":["../../src/WS_UIkit/src/components/WsBtnToggle.vue","../../src/WS_UIkit/src/components/WsBtnToggle.vue?vue&type=template&lang.js"],"sourcesContent":["<template>\n  <q-tabs\n    v-if=\"optionsProcessed.length !== 0\"\n    v-bind=\"$attrs\"\n    :value=\"value\"\n    :name=\"name\"\n    class=\"ws-btn-toggle\"\n    indicator-color=\"ws-white\"\n    v-on=\"$listeners\"\n    @input=\"onUpdate\"\n  >\n    <q-tab\n      v-for=\"(option, i) in optionsProcessed\"\n      :key=\"option.value\"\n      :ripple=\"false\"\n      :name=\"option.value\"\n      :label=\"option.label\"\n      :style=\"`width:${100 / optionsProcessed.length}%`\"\n      :class=\"{'with-badge': option.badgeValue !== undefined}\"\n      :disable=\"getDisabled(option, i)\"\n    >\n      <q-badge v-if=\"option.badgeValue !== undefined\" :class=\"option.badgeType.toLowerCase()\">\n        {{ option.badgeValue }}\n      </q-badge>\n      <ws-tooltip v-if=\"getDisabled(option, i) && get(option, 'disabledTooltip')\">\n        {{ option.disabledTooltip }}\n      </ws-tooltip>\n      <ws-tooltip v-else-if=\"get(option, 'tooltip')\">\n        {{ option.tooltip }}\n      </ws-tooltip>\n      <ws-icon v-if=\"option.icon\" :name=\"option.icon\"></ws-icon>\n    </q-tab>\n    <input :name=\"name\" type=\"hidden\" :value=\"value\" />\n  </q-tabs>\n</template>\n\n<script lang=\"ts\">\nimport {QTabs, QTab} from 'quasar';\nimport {\n  type PropType,\n  defineComponent,\n  getCurrentInstance,\n  computed,\n} from 'vue';\nimport {useTranslation} from '@loopia-group/vue2-utils';\nimport {Theme} from '@loopia-group/services';\nimport {get} from 'lodash-es';\nimport {WsIcon} from '@loopia-group/components-vue2';\n\nexport default defineComponent({\n  name: 'WsBtnToggle',\n  components:{\n    QTabs,\n    QTab,\n    WsIcon\n  },\n  props: {\n    options: {\n      type: Array as PropType<Array<string>>,\n      default: () => [],\n    },\n    hiddenOptions: {\n      type: Array as PropType<Array<boolean>>,\n      default: () => [],\n    },\n    disabledOptions: {\n      type: Array as PropType<Array<boolean>>,\n      default: () => [],\n    },\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    }\n  },\n  emits: ['input'],\n  setup(props, vm) {\n    const instance = getCurrentInstance() as any;\n    const {$t} = useTranslation(instance);\n    const optionsProcessed = computed(() => {\n      return props.options.map((option: { label: string; }) => {\n        const opt = { ...option };\n        opt.label = $t(option.label);\n        return opt;\n      }).filter((_, index: number) => {\n        return !get(props.hiddenOptions, index, false);\n      });\n    });\n\n    const onUpdate = ((value: any): void => {\n      vm.emit('input', value);\n      if (instance?.proxy.$parent) {\n        instance.proxy.$parent.$emit('dirty', value);\n      }\n    });\n\n    const getDisabled = ((option: {disabled: boolean}, index: number): boolean => {\n      return get(props.disabledOptions, index, get(option, 'disabled', false));\n    });\n\n    return {onUpdate, optionsProcessed, Theme, get, getDisabled};\n  }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.ws-btn-toggle {\n  border: none;\n  padding: map-get($space-xs, x);\n  color: $toggle-button-color;\n  background: $toggle-button-bg;\n  box-shadow: none;\n  border-radius: $button-border-radius;\n  position: relative;\n  /* z-index to compensate the tab indicator's stacking order change\n  when Quasar applies transition and/or transformation */\n  z-index: 0;\n\n  &[disabled] ::v-deep .q-tab {\n    pointer-events: none;\n  }\n\n  .theme--loopia & {\n    background: var(--toggle-button-bg);\n  }\n\n  ::v-deep {\n    .q-tab {\n      min-height: map-get($space-xl, x);\n      padding: 0 map-get($space-sm, x);\n      margin: 0;\n      border-radius: $button-border-radius;\n      text-transform: none;\n      align-content: center;\n      color: $toggle-button-active-color;\n\n      .theme--loopia & {\n        color: $ws-base160;\n      }\n    }\n\n    .q-tab.with-badge .q-tab__content {\n      flex-direction: row;\n    }\n\n    .q-focus-helper {\n      display: none;\n    }\n\n    .q-badge {\n      margin-left: map-get($space-sm, x);\n      border-radius: 3px;\n\n      // TODO: replace with variables after Figma tokens are implemented\n      &.success {\n        background: $ws-gem-100;\n      }\n\n      &.empty {\n        background: $ws-content-disabled;\n      }\n\n      &.warning {\n        background: $ws-sun-110;\n      }\n\n      &.danger {\n        background: $ws-brick-200;\n      }\n\n      &.base {\n        background: $ws-king-200;\n      }\n\n      &.positive {\n        background: $ws-gem-140;\n      }\n\n      &.neutral {\n        background: $ws-navy-80;\n      }\n\n      &.alert {\n        background: $ws-pumpkin-200;\n      }\n\n      &.dark {\n        background: $ws-navy-100;\n      }\n\n      &.premium {\n        background: $ws-plum-100;\n      }\n\n      &.basic {\n        background: $ws-aqua-120;\n      }\n\n      &.advanced {\n        background: $ws-pumpkin-100;\n      }\n    }\n  }\n}\n\n.wsk-root .ws-btn-toggle::v-deep, .ws-btn-toggle::v-deep {\n  .q-tab--active .q-tab__indicator {\n    height: 100%;\n    border-radius: $button-border-radius;\n    background-color: $toggle-button-active-tab-bg;\n    z-index: -1;\n\n    .theme--loopia & {\n      background-color: var(--toggle-button-active-tab-bg);\n    }\n  }\n\n  .q-tab .q-tab__label,\n  .q-tab--active .q-tab__label {\n    @include ws-typo-small;\n    font-weight: normal;\n    text-overflow: ellipsis;\n    transition: font-weight 150ms ease-in-out,\n    font-size 150ms ease-in-out;\n\n    overflow: hidden;\n    max-width: calc(\n      100% + #{map-get($space-sm, x)}\n    ); // sm space for right padding\n\n    .theme--loopia & {\n      font-weight: 700;\n    }\n  }\n\n  .q-tab--active .q-tab__label, .q-tab:not(.disabled):hover .q-tab__label {\n    font-weight: 700;\n  }\n\n  .q-tab:not(.q-tab--active):hover .q-tab__label {\n    .theme--loopia & {\n      font-size: 1.05em;\n    }\n  }\n\n  .q-tab--active {\n    .theme--loopia & {\n      color: var(--toggle-button-active-color);\n    }\n  }\n}\n</style>\n","\n<q-tabs\n  v-if=\"optionsProcessed.length !== 0\"\n  v-bind=\"$attrs\"\n  :value=\"value\"\n  :name=\"name\"\n  class=\"ws-btn-toggle\"\n  indicator-color=\"ws-white\"\n  v-on=\"$listeners\"\n  @input=\"onUpdate\"\n>\n  <q-tab\n    v-for=\"(option, i) in optionsProcessed\"\n    :key=\"option.value\"\n    :ripple=\"false\"\n    :name=\"option.value\"\n    :label=\"option.label\"\n    :style=\"`width:${100 / optionsProcessed.length}%`\"\n    :class=\"{'with-badge': option.badgeValue !== undefined}\"\n    :disable=\"getDisabled(option, i)\"\n  >\n    <q-badge v-if=\"option.badgeValue !== undefined\" :class=\"option.badgeType.toLowerCase()\">\n      {{ option.badgeValue }}\n    </q-badge>\n    <ws-tooltip v-if=\"getDisabled(option, i) && get(option, 'disabledTooltip')\">\n      {{ option.disabledTooltip }}\n    </ws-tooltip>\n    <ws-tooltip v-else-if=\"get(option, 'tooltip')\">\n      {{ option.tooltip }}\n    </ws-tooltip>\n    <ws-icon v-if=\"option.icon\" :name=\"option.icon\"></ws-icon>\n  </q-tab>\n  <input :name=\"name\" type=\"hidden\" :value=\"value\" />\n</q-tabs>\n"],"names":["__vue2_script","defineComponent","QTabs","QTab","WsIcon","props","vm","instance","getCurrentInstance","$t","useTranslation","optionsProcessed","computed","option","opt","__spreadValues","_","index","get","value","Theme","render","_vm","_h","_c","i","staticRenderFns"],"mappings":"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"}