@eturnity/eturnity_reusable_components 7.37.5 → 7.39.0

package/src/components/rangeSlider/index.vue

@@ -1,517 +1,517 @@
-<template>
-  <RangeSliderContainer>
-    <Labels v-if="topLabels && topLabels.length > 0">
-      <Label v-for="label in topLabels" :key="label">
-        {{ label }}
-      </Label>
-    </Labels>
-
-    <BarContainer v-if="leftLabels && leftLabels.length > 0">
-      <BarWrapper v-for="(label, index) in leftLabels" :key="index">
-        <VerticalLabel>{{ label.name }}</VerticalLabel>
-        <BarSlider>
-          <Bar
-            :data-id="`slider_bar_${dataLocation}_${label.id}`"
-            @click.native.stop="
-              onBarRightClick({ event: $event, label, type: 'add' })
-            "
-          >
-            <SliderWrapper>
-              <Slider
-                v-for="(bar, index) in label.selectedTariffs"
-                :key="bar.id"
-                :color="
-                  hasOverlap && OverlapId.includes(label.id)
-                    ? '#ff5656'
-                    : bar.color
-                "
-                :data-id="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
-                :draggable="!disabled"
-                :max="bar.max"
-                :min="bar.min"
-                :min-width="minWidth"
-                :resizable="!disabled"
-                :step="step"
-                :step-count="stepCount"
-                :sub-step-count="subStepCount"
-                :z="index"
-                @activated="onActivateBar({ item: bar })"
-                @click.native.stop="
-                  onBarTariffClick({ item: bar, type: 'delete', label })
-                "
-                @deactivated="onDeactivateBar()"
-                @drag-stop="
-                  onChange('drag', {
-                    itemId: bar.id,
-                    parentId: bar.parentId,
-                    entityId: label.id,
-                    ...$event,
-                  })
-                "
-                @resize-stop="
-                  onChange('resize', {
-                    itemId: bar.id,
-                    entityId: label.id,
-                    ...$event,
-                  })
-                "
-              >
-                <template #mr>
-                  <HandleIcon />
-                </template>
-                <template #ml>
-                  <HandleIcon />
-                </template>
-              </Slider>
-            </SliderWrapper>
-          </Bar>
-          <Ruler>
-            <RulerRule v-for="n in stepCount" :key="n" />
-          </Ruler>
-          <SubRuler>
-            <RulerSubRule v-for="n in subStepCount" :key="n" />
-          </SubRuler>
-          <ErrorMessage
-            v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
-          >
-            *{{ $gettext('overlap_error_message') }}
-          </ErrorMessage>
-        </BarSlider>
-      </BarWrapper>
-    </BarContainer>
-    <BarOptionsContainer
-      v-if="showBarOptions"
-      ref="barDropdown"
-      :left="barOptionsPosition.x"
-      :top="barOptionsPosition.y"
-    >
-      <BarItemContainer
-        v-for="item in barOptionsList"
-        :key="item.id"
-        @click="
-          onBarTariffClick({ item, type: barOptionsType, label: activeLabel })
-        "
-      >
-        <AddIcon />
-        <BarItemText>{{ item.name }}</BarItemText>
-      </BarItemContainer>
-    </BarOptionsContainer>
-  </RangeSliderContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import handleSVG from '../../assets/svgIcons/handle.svg'
-  import add from '../../assets/svgIcons/add_icon.svg'
-
-  import SliderComponent from './Slider'
-
-  const wrapperAttrs = { width: String, height: String }
-  const SliderWrapper = styled('div', wrapperAttrs)`
-    position: relative;
-    display: flex;
-    height: ${(props) => props.height || '24px'};
-    width: ${(props) => props.width || '100%'};
-  `
-
-  const sliderAttrs = { color: String, draggable: Boolean }
-  const Slider = styled(SliderComponent, sliderAttrs)`
-    cursor: ${(props) => (props.draggable ? 'pointer' : 'not-allowed')};
-    opacity: 0.7;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: unset !important;
-    background-color: ${(props) => props.color};
-  `
-
-  const ErrorMessage = styled.p`
-    color: ${(props) => props.theme.colors.red};
-    font-style: italic;
-    font-size: 13px;
-    margin-top: 5px;
-  `
-
-  const Bar = styled.div`
-    display: flex;
-    margin-bottom: -30px;
-    margin-left: 1px;
-    background-color: #f6faff;
-    width: 100%;
-    background-color: ${(props) => props.theme.colors.gray1};
-  `
-
-  const Ruler = styled.div`
-    margin: 10px 0px -5px 0px;
-    display: flex;
-    overflow: hidden;
-  `
-
-  const RulerRule = styled.div`
-    border-left: solid 1px ${(props) => props.theme.colors.grey2};
-    border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 1;
-    padding: 10px 0px;
-
-    &:last-child {
-      border-right: solid 1px ${(props) => props.theme.colors.grey2};
-    }
-  `
-
-  const SubRuler = styled.div`
-    margin: -7px 0px -5px 0px;
-    display: flex;
-  `
-
-  const RulerSubRule = styled.div`
-    border-left: solid 1px ${(props) => props.theme.colors.grey2};
-    border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 1;
-    padding: 3px 0px;
-
-    &:last-child {
-      border-right: solid 1px ${(props) => props.theme.colors.grey2};
-    }
-
-    &:nth-child(odd) {
-      margin-top: -5px;
-      padding: 5px 0px;
-    }
-  `
-
-  const BarSlider = styled.div`
-    width: 100%;
-  `
-
-  const BarContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-  `
-
-  const BarWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    margin: 20px 0px;
-    align-items: center;
-  `
-
-  const RangeSliderContainer = styled.div`
-    display: flex;
-    position: relative;
-    padding: 20px 10px;
-    flex-direction: column;
-    user-select: none;
-    width: 100%;
-  `
-
-  const Labels = styled.div`
-    display: flex;
-    justify-content: space-between;
-    padding: 0px;
-    margin: 10px -100px 0px 100px;
-    width: calc(100% - 100px);
-  `
-
-  const Label = styled.div`
-    font-size: 80%;
-    display: flex;
-    width: 1px;
-    justify-content: center;
-  `
-
-  const VerticalLabel = styled.div`
-    text-align: left;
-    min-width: 100px;
-    font-size: 13px;
-  `
-
-  const AddIcon = styled(add)`
-    width: 33px;
-    height: 29px;
-    fill: black
-    margin-left: -17px;
-    margin-top: -10px;
-`
-
-  const HandleIcon = styled(handleSVG)`
-    width: 13px;
-    min-width: 0;
-    margin: -6px;
-  `
-
-  const BarOptionAttrs = { top: Number, left: Number }
-  const BarOptionsContainer = styled('div', BarOptionAttrs)`
-    display: grid;
-    position: fixed;
-    z-index: 9999;
-    border-radius: 4px;
-    background-color: ${(props) => props.theme.colors.white};
-    padding: 6px 10px;
-    border: 1px solid ${(props) => props.theme.colors.grey4};
-    top: ${(props) => props.top + 'px'};
-    left: ${(props) => props.left + 'px'};
-  `
-
-  const BarItemContainer = styled.div`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 12px;
-    align-items: center;
-    cursor: pointer;
-    padding: 6px 10px;
-    border-radius: 4px;
-
-    &:hover {
-      background-color: ${(props) => props.theme.colors.lightGray};
-    }
-  `
-
-  const BarItemText = styled.div`
-    font-size: 13px;
-  `
-
-  export default {
-    name: 'RangeSlider',
-    components: {
-      Bar,
-      Label,
-      Labels,
-      Ruler,
-      Slider,
-      AddIcon,
-      SubRuler,
-      BarSlider,
-      RulerRule,
-      HandleIcon,
-      BarWrapper,
-      ErrorMessage,
-      RulerSubRule,
-      BarContainer,
-      SliderWrapper,
-      VerticalLabel,
-      RangeSliderContainer,
-      BarOptionsContainer,
-      BarItemContainer,
-      BarItemText,
-    },
-    props: {
-      dataLocation: { type: String, default: '' },
-      tariffItems: { type: Array, default: () => [] },
-      labels: { type: Array, default: () => [] },
-      rangeMargin: { type: Number, default: 1 },
-      step: { type: Number, default: 1 },
-      minWidth: { type: Number, default: 1 },
-      canOverlap: { type: Boolean, default: true },
-      disabled: { type: Boolean, default: false },
-    },
-    data() {
-      return {
-        showBarOptions: false,
-        barOptionsPosition: { x: 0, y: 0 },
-        barOptionsList: [],
-        barOptionsType: null, // can be "add" or "delete"
-        activeLabel: null,
-        activeItem: null,
-        OverlapId: [],
-        hasOverlap: false,
-      }
-    },
-    computed: {
-      maximum() {
-        if (!this.labels.length) return
-
-        return this.topLabels.at(-1)
-      },
-      minimum() {
-        if (!this.labels.length) return
-
-        return this.topLabels[0]
-      },
-      topLabels() {
-        if (!this.labels.length) return
-        const labels = this.labels.find((label) => label.placement === 'top')
-
-        return labels ? labels.value : []
-      },
-      leftLabels() {
-        if (!this.labels.length) return
-        const labels = this.labels.find((label) => label.placement === 'left')
-        return labels ? labels.value : []
-      },
-      stepCount() {
-        let labels = this.topLabels || []
-
-        if (labels.length) {
-          return labels.length - 1
-        }
-
-        return Math.floor((this.maximum - this.minimum) / this.step)
-      },
-      subStepCount() {
-        let labels = this.topLabels || []
-
-        if (labels.length && this.step) {
-          return (this.maximum - this.minimum) / this.step
-        }
-
-        return 0
-      },
-    },
-    watch: {
-      labels(newVal, oldVal) {
-        const overlapContainer = []
-
-        //check items for overlap
-        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-          const labels = newVal.find((label) => label.placement === 'left')
-
-          if (labels) {
-            labels.value.forEach((label) => {
-              label.selectedTariffs.forEach((tariff) => {
-                const hasOverlap = this.checkOverlap(
-                  tariff,
-                  label.selectedTariffs
-                )
-
-                if (hasOverlap) overlapContainer.push(label.id)
-              })
-            })
-          }
-
-          const hasOverlap = overlapContainer.length > 0
-
-          if (!hasOverlap) {
-            this.OverlapId = []
-          } else {
-            this.OverlapId = [...new Set(overlapContainer)]
-          }
-
-          this.hasOverlap = hasOverlap
-          this.$emit('has-overlap', hasOverlap)
-        }
-      },
-    },
-    beforeDestroy() {
-      // Remove the global click event listener to prevent memory leaks
-      document.removeEventListener('click', this.handleOutsideClick)
-      document.removeEventListener('keydown', this.onKeyDownDelete)
-    },
-    methods: {
-      onChange(type, value) {
-        this.$emit(type, value)
-      },
-      checkOverlap(value, tariffs) {
-        // Check if the tariffs overlap
-        const min = parseFloat(value.min)
-        const max = parseFloat(value.max)
-
-        return tariffs.some((tariff) => {
-          if (tariff.id === value.itemId || tariff.id === value.id) return false
-
-          return (
-            min === tariff.min ||
-            max === tariff.max ||
-            (min > tariff.min && min < tariff.max) ||
-            (max > tariff.min && max < tariff.max) ||
-            (min < tariff.min && max > tariff.max)
-          )
-        })
-      },
-      barOptionLabel(value) {
-        if (this.barOptionsType === 'add')
-          return `${this.$gettext('Add')} ${value}`
-
-        return `${this.$gettext('Remove')} ${value}`
-      },
-      onActivateBar({ item }) {
-        this.$emit('activate')
-        this.activeItem = item
-        document.addEventListener('keydown', this.onKeyDownDelete)
-      },
-      onDeactivateBar() {
-        this.$emit('deactivate')
-        this.activeItem = null
-        document.removeEventListener('keydown', this.onKeyDownDelete)
-      },
-      onKeyDownDelete(event) {
-        // Check if the pressed key is the Delete or Backspace key
-        if (
-          (event.key === 'Delete' || event.key === 'Backspace') &&
-          this.activeItem
-        ) {
-          this.$emit('on-bar-tariff-click', {
-            type: 'delete',
-            item: this.activeItem,
-            label: this.activeLabel,
-          })
-          this.activeItem = null
-        }
-      },
-      onBarTariffClick({ item, type, label }) {
-        if (this.disabled) return
-
-        this.$emit('on-bar-tariff-click', {
-          type,
-          item,
-          label,
-        })
-
-        this.activeLabel = label
-        this.barOptionsType = type
-        this.showBarOptions = false
-      },
-      setBarOptions(bar) {
-        this.barOptionsList = []
-
-        if (this.barOptionsType === 'add') {
-          this.tariffItems.forEach((item) => {
-            if (item.name && item.name.length) {
-              this.barOptionsList.push(item)
-            }
-          })
-        } else {
-          // add based on the index in the chart.
-          this.barOptionsList.push({
-            name: bar.name,
-            id: bar.id,
-          })
-        }
-      },
-      onBarRightClick({ event, label, type, bar }) {
-        if (this.disabled) return
-
-        // type can be "add", "delete"
-        // if "add", show all tariffItems for the group
-        // if "delete", only show the delete with the tariff name
-        event.preventDefault()
-        this.activeLabel = label
-        this.barOptionsType = type
-        this.setBarOptions(bar)
-
-        if (this.barOptionsList.length) {
-          this.showBarOptions = true
-          this.barOptionsPosition = { x: event.clientX, y: event.clientY }
-          document.addEventListener('click', this.handleOutsideClick)
-        } else {
-          this.showBarOptions = false
-        }
-      },
-      handleOutsideClick(event) {
-        // Check if the click occurred outside the dropdown
-        if (
-          this.$refs.barDropdown &&
-          !this.$refs.barDropdown.$el.contains(event.target)
-        ) {
-          // Hide the dropdown
-          this.showBarOptions = false
-          // Remove the global click event listener
-          document.removeEventListener('click', this.handleOutsideClick)
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <RangeSliderContainer>
+    <Labels v-if="topLabels && topLabels.length > 0">
+      <Label v-for="label in topLabels" :key="label">
+        {{ label }}
+      </Label>
+    </Labels>
+
+    <BarContainer v-if="leftLabels && leftLabels.length > 0">
+      <BarWrapper v-for="(label, index) in leftLabels" :key="index">
+        <VerticalLabel>{{ label.name }}</VerticalLabel>
+        <BarSlider>
+          <Bar
+            :data-id="`slider_bar_${dataLocation}_${label.id}`"
+            @click.native.stop="
+              onBarRightClick({ event: $event, label, type: 'add' })
+            "
+          >
+            <SliderWrapper>
+              <Slider
+                v-for="(bar, index) in label.selectedTariffs"
+                :key="bar.id"
+                :color="
+                  hasOverlap && OverlapId.includes(label.id)
+                    ? '#ff5656'
+                    : bar.color
+                "
+                :data-id="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
+                :draggable="!disabled"
+                :max="bar.max"
+                :min="bar.min"
+                :min-width="minWidth"
+                :resizable="!disabled"
+                :step="step"
+                :step-count="stepCount"
+                :sub-step-count="subStepCount"
+                :z="index"
+                @activated="onActivateBar({ item: bar })"
+                @click.native.stop="
+                  onBarTariffClick({ item: bar, type: 'delete', label })
+                "
+                @deactivated="onDeactivateBar()"
+                @drag-stop="
+                  onChange('drag', {
+                    itemId: bar.id,
+                    parentId: bar.parentId,
+                    entityId: label.id,
+                    ...$event,
+                  })
+                "
+                @resize-stop="
+                  onChange('resize', {
+                    itemId: bar.id,
+                    entityId: label.id,
+                    ...$event,
+                  })
+                "
+              >
+                <template #mr>
+                  <HandleIcon />
+                </template>
+                <template #ml>
+                  <HandleIcon />
+                </template>
+              </Slider>
+            </SliderWrapper>
+          </Bar>
+          <Ruler>
+            <RulerRule v-for="n in stepCount" :key="n" />
+          </Ruler>
+          <SubRuler>
+            <RulerSubRule v-for="n in subStepCount" :key="n" />
+          </SubRuler>
+          <ErrorMessage
+            v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
+          >
+            *{{ $gettext('overlap_error_message') }}
+          </ErrorMessage>
+        </BarSlider>
+      </BarWrapper>
+    </BarContainer>
+    <BarOptionsContainer
+      v-if="showBarOptions"
+      ref="barDropdown"
+      :left="barOptionsPosition.x"
+      :top="barOptionsPosition.y"
+    >
+      <BarItemContainer
+        v-for="item in barOptionsList"
+        :key="item.id"
+        @click="
+          onBarTariffClick({ item, type: barOptionsType, label: activeLabel })
+        "
+      >
+        <AddIcon />
+        <BarItemText>{{ item.name }}</BarItemText>
+      </BarItemContainer>
+    </BarOptionsContainer>
+  </RangeSliderContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import handleSVG from '../../assets/svgIcons/handle.svg'
+  import add from '../../assets/svgIcons/add_icon.svg'
+
+  import SliderComponent from './Slider'
+
+  const wrapperAttrs = { width: String, height: String }
+  const SliderWrapper = styled('div', wrapperAttrs)`
+    position: relative;
+    display: flex;
+    height: ${(props) => props.height || '24px'};
+    width: ${(props) => props.width || '100%'};
+  `
+
+  const sliderAttrs = { color: String, draggable: Boolean }
+  const Slider = styled(SliderComponent, sliderAttrs)`
+    cursor: ${(props) => (props.draggable ? 'pointer' : 'not-allowed')};
+    opacity: 0.7;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: unset !important;
+    background-color: ${(props) => props.color};
+  `
+
+  const ErrorMessage = styled.p`
+    color: ${(props) => props.theme.colors.red};
+    font-style: italic;
+    font-size: 13px;
+    margin-top: 5px;
+  `
+
+  const Bar = styled.div`
+    display: flex;
+    margin-bottom: -30px;
+    margin-left: 1px;
+    background-color: #f6faff;
+    width: 100%;
+    background-color: ${(props) => props.theme.colors.gray1};
+  `
+
+  const Ruler = styled.div`
+    margin: 10px 0px -5px 0px;
+    display: flex;
+    overflow: hidden;
+  `
+
+  const RulerRule = styled.div`
+    border-left: solid 1px ${(props) => props.theme.colors.grey2};
+    border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 10px 0px;
+
+    &:last-child {
+      border-right: solid 1px ${(props) => props.theme.colors.grey2};
+    }
+  `
+
+  const SubRuler = styled.div`
+    margin: -7px 0px -5px 0px;
+    display: flex;
+  `
+
+  const RulerSubRule = styled.div`
+    border-left: solid 1px ${(props) => props.theme.colors.grey2};
+    border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 3px 0px;
+
+    &:last-child {
+      border-right: solid 1px ${(props) => props.theme.colors.grey2};
+    }
+
+    &:nth-child(odd) {
+      margin-top: -5px;
+      padding: 5px 0px;
+    }
+  `
+
+  const BarSlider = styled.div`
+    width: 100%;
+  `
+
+  const BarContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+  `
+
+  const BarWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0px;
+    align-items: center;
+  `
+
+  const RangeSliderContainer = styled.div`
+    display: flex;
+    position: relative;
+    padding: 20px 10px;
+    flex-direction: column;
+    user-select: none;
+    width: 100%;
+  `
+
+  const Labels = styled.div`
+    display: flex;
+    justify-content: space-between;
+    padding: 0px;
+    margin: 10px -100px 0px 100px;
+    width: calc(100% - 100px);
+  `
+
+  const Label = styled.div`
+    font-size: 80%;
+    display: flex;
+    width: 1px;
+    justify-content: center;
+  `
+
+  const VerticalLabel = styled.div`
+    text-align: left;
+    min-width: 100px;
+    font-size: 13px;
+  `
+
+  const AddIcon = styled(add)`
+    width: 33px;
+    height: 29px;
+    fill: black
+    margin-left: -17px;
+    margin-top: -10px;
+`
+
+  const HandleIcon = styled(handleSVG)`
+    width: 13px;
+    min-width: 0;
+    margin: -6px;
+  `
+
+  const BarOptionAttrs = { top: Number, left: Number }
+  const BarOptionsContainer = styled('div', BarOptionAttrs)`
+    display: grid;
+    position: fixed;
+    z-index: 9999;
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.white};
+    padding: 6px 10px;
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    top: ${(props) => props.top + 'px'};
+    left: ${(props) => props.left + 'px'};
+  `
+
+  const BarItemContainer = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 12px;
+    align-items: center;
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.lightGray};
+    }
+  `
+
+  const BarItemText = styled.div`
+    font-size: 13px;
+  `
+
+  export default {
+    name: 'RangeSlider',
+    components: {
+      Bar,
+      Label,
+      Labels,
+      Ruler,
+      Slider,
+      AddIcon,
+      SubRuler,
+      BarSlider,
+      RulerRule,
+      HandleIcon,
+      BarWrapper,
+      ErrorMessage,
+      RulerSubRule,
+      BarContainer,
+      SliderWrapper,
+      VerticalLabel,
+      RangeSliderContainer,
+      BarOptionsContainer,
+      BarItemContainer,
+      BarItemText,
+    },
+    props: {
+      dataLocation: { type: String, default: '' },
+      tariffItems: { type: Array, default: () => [] },
+      labels: { type: Array, default: () => [] },
+      rangeMargin: { type: Number, default: 1 },
+      step: { type: Number, default: 1 },
+      minWidth: { type: Number, default: 1 },
+      canOverlap: { type: Boolean, default: true },
+      disabled: { type: Boolean, default: false },
+    },
+    data() {
+      return {
+        showBarOptions: false,
+        barOptionsPosition: { x: 0, y: 0 },
+        barOptionsList: [],
+        barOptionsType: null, // can be "add" or "delete"
+        activeLabel: null,
+        activeItem: null,
+        OverlapId: [],
+        hasOverlap: false,
+      }
+    },
+    computed: {
+      maximum() {
+        if (!this.labels.length) return
+
+        return this.topLabels.at(-1)
+      },
+      minimum() {
+        if (!this.labels.length) return
+
+        return this.topLabels[0]
+      },
+      topLabels() {
+        if (!this.labels.length) return
+        const labels = this.labels.find((label) => label.placement === 'top')
+
+        return labels ? labels.value : []
+      },
+      leftLabels() {
+        if (!this.labels.length) return
+        const labels = this.labels.find((label) => label.placement === 'left')
+        return labels ? labels.value : []
+      },
+      stepCount() {
+        let labels = this.topLabels || []
+
+        if (labels.length) {
+          return labels.length - 1
+        }
+
+        return Math.floor((this.maximum - this.minimum) / this.step)
+      },
+      subStepCount() {
+        let labels = this.topLabels || []
+
+        if (labels.length && this.step) {
+          return (this.maximum - this.minimum) / this.step
+        }
+
+        return 0
+      },
+    },
+    watch: {
+      labels(newVal, oldVal) {
+        const overlapContainer = []
+
+        //check items for overlap
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          const labels = newVal.find((label) => label.placement === 'left')
+
+          if (labels) {
+            labels.value.forEach((label) => {
+              label.selectedTariffs.forEach((tariff) => {
+                const hasOverlap = this.checkOverlap(
+                  tariff,
+                  label.selectedTariffs
+                )
+
+                if (hasOverlap) overlapContainer.push(label.id)
+              })
+            })
+          }
+
+          const hasOverlap = overlapContainer.length > 0
+
+          if (!hasOverlap) {
+            this.OverlapId = []
+          } else {
+            this.OverlapId = [...new Set(overlapContainer)]
+          }
+
+          this.hasOverlap = hasOverlap
+          this.$emit('has-overlap', hasOverlap)
+        }
+      },
+    },
+    beforeDestroy() {
+      // Remove the global click event listener to prevent memory leaks
+      document.removeEventListener('click', this.handleOutsideClick)
+      document.removeEventListener('keydown', this.onKeyDownDelete)
+    },
+    methods: {
+      onChange(type, value) {
+        this.$emit(type, value)
+      },
+      checkOverlap(value, tariffs) {
+        // Check if the tariffs overlap
+        const min = parseFloat(value.min)
+        const max = parseFloat(value.max)
+
+        return tariffs.some((tariff) => {
+          if (tariff.id === value.itemId || tariff.id === value.id) return false
+
+          return (
+            min === tariff.min ||
+            max === tariff.max ||
+            (min > tariff.min && min < tariff.max) ||
+            (max > tariff.min && max < tariff.max) ||
+            (min < tariff.min && max > tariff.max)
+          )
+        })
+      },
+      barOptionLabel(value) {
+        if (this.barOptionsType === 'add')
+          return `${this.$gettext('Add')} ${value}`
+
+        return `${this.$gettext('Remove')} ${value}`
+      },
+      onActivateBar({ item }) {
+        this.$emit('activate')
+        this.activeItem = item
+        document.addEventListener('keydown', this.onKeyDownDelete)
+      },
+      onDeactivateBar() {
+        this.$emit('deactivate')
+        this.activeItem = null
+        document.removeEventListener('keydown', this.onKeyDownDelete)
+      },
+      onKeyDownDelete(event) {
+        // Check if the pressed key is the Delete or Backspace key
+        if (
+          (event.key === 'Delete' || event.key === 'Backspace') &&
+          this.activeItem
+        ) {
+          this.$emit('on-bar-tariff-click', {
+            type: 'delete',
+            item: this.activeItem,
+            label: this.activeLabel,
+          })
+          this.activeItem = null
+        }
+      },
+      onBarTariffClick({ item, type, label }) {
+        if (this.disabled) return
+
+        this.$emit('on-bar-tariff-click', {
+          type,
+          item,
+          label,
+        })
+
+        this.activeLabel = label
+        this.barOptionsType = type
+        this.showBarOptions = false
+      },
+      setBarOptions(bar) {
+        this.barOptionsList = []
+
+        if (this.barOptionsType === 'add') {
+          this.tariffItems.forEach((item) => {
+            if (item.name && item.name.length) {
+              this.barOptionsList.push(item)
+            }
+          })
+        } else {
+          // add based on the index in the chart.
+          this.barOptionsList.push({
+            name: bar.name,
+            id: bar.id,
+          })
+        }
+      },
+      onBarRightClick({ event, label, type, bar }) {
+        if (this.disabled) return
+
+        // type can be "add", "delete"
+        // if "add", show all tariffItems for the group
+        // if "delete", only show the delete with the tariff name
+        event.preventDefault()
+        this.activeLabel = label
+        this.barOptionsType = type
+        this.setBarOptions(bar)
+
+        if (this.barOptionsList.length) {
+          this.showBarOptions = true
+          this.barOptionsPosition = { x: event.clientX, y: event.clientY }
+          document.addEventListener('click', this.handleOutsideClick)
+        } else {
+          this.showBarOptions = false
+        }
+      },
+      handleOutsideClick(event) {
+        // Check if the click occurred outside the dropdown
+        if (
+          this.$refs.barDropdown &&
+          !this.$refs.barDropdown.$el.contains(event.target)
+        ) {
+          // Hide the dropdown
+          this.showBarOptions = false
+          // Remove the global click event listener
+          document.removeEventListener('click', this.handleOutsideClick)
+        }
+      },
+    },
+  }
+</script>