@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-8441.0

package/src/components/rangeSlider/index.vue

@@ -1,529 +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
+            @click.native.stop="
+              onBarRightClick({ event: $event, label, type: 'add' })
+            "
+            :data-id="`slider_bar_${dataLocation}_${label.id}`"
+          >
+            <SliderWrapper>
+              <Slider
+                v-for="(bar, index) in label.selectedTariffs"
+                :dataId="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
+                :key="bar.id"
+                :draggable="!disabled"
+                :resizable="!disabled"
+                :color="
+                  hasOverlap && OverlapId.includes(label.id)
+                    ? '#ff5656'
+                    : bar.color
+                "
+                :minWidth="minWidth"
+                :min="bar.min"
+                :max="bar.max"
+                :z="index"
+                :step="step"
+                :stepCount="stepCount"
+                :subStepCount="subStepCount"
+                @dragStop="
+                  onChange('drag', {
+                    itemId: bar.id,
+                    parentId: bar.parentId,
+                    entityId: label.id,
+                    ...$event
+                  })
+                "
+                @resizeStop="
+                  onChange('resize', {
+                    itemId: bar.id,
+                    entityId: label.id,
+                    ...$event
+                  })
+                "
+                @click.native.stop="
+                  onBarTariffClick({ item: bar, type: 'delete', label })
+                "
+                @activated="onActivateBar({ item: bar })"
+                @deactivated="onDeactivateBar()"
+              >
+                <template #mr>
+                  <HandleIcon />
+                </template>
+                <template #ml>
+                  <HandleIcon />
+                </template>
+              </Slider>
+            </SliderWrapper>
+          </Bar>
+          <Ruler>
+            <RulerRule v-for="n in stepCount" :key="n"></RulerRule>
+          </Ruler>
+          <SubRuler>
+            <RulerSubRule v-for="n in subStepCount" :key="n"></RulerSubRule>
+          </SubRuler>
+          <ErrorMessage
+            v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
+          >
+            *{{ $gettext('overlap_error_message') }}
+          </ErrorMessage>
+        </BarSlider>
+      </BarWrapper>
+    </BarContainer>
+    <bar-options-container
+      v-if="showBarOptions"
+      :top="barOptionsPosition.y"
+      :left="barOptionsPosition.x"
+      ref="barDropdown"
+    >
+      <bar-item-container
+        v-for="item in barOptionsList"
+        :key="item.id"
+        @click="
+          onBarTariffClick({ item, type: barOptionsType, label: activeLabel })
+        "
+      >
+        <AddIcon />
+        <bar-item-text>{{ item.name }}</bar-item-text>
+      </bar-item-container>
+    </bar-options-container>
+  </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',
+  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 }
+  },
+  components: {
+    Bar,
+    Label,
+    Labels,
+    Ruler,
+    Slider,
+    AddIcon,
+    SubRuler,
+    BarSlider,
+    RulerRule,
+    HandleIcon,
+    BarWrapper,
+    ErrorMessage,
+    RulerSubRule,
+    BarContainer,
+    SliderWrapper,
+    VerticalLabel,
+    RangeSliderContainer,
+    BarOptionsContainer,
+    BarItemContainer,
+    BarItemText
+  },
+  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
+    }
+  },
+  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)
+      }
+    }
+  },
+  beforeDestroy() {
+    // Remove the global click event listener to prevent memory leaks
+    document.removeEventListener('click', this.handleOutsideClick)
+    document.removeEventListener('keydown', this.onKeyDownDelete)
+  },
+  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)
+      }
+    }
+  }
+}
+</script>