@heartlandone/vega 2.74.0 → 2.75.0

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -19,11 +19,183 @@
   aspect-ratio: 1/1;
 }
 
+:host .month-item-header .button-today::part(link) {
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+  vertical-align: top;
+}
+:host .month-item-header vega-dropdown .month-item-name,
+:host .month-item-header vega-dropdown .month-item-year {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+}
+:host .month-item-header vega-dropdown.active .month-item-name,
+:host .month-item-header vega-dropdown.active .month-item-year {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+}
+:host .month-item-header .button-previous-month.disabled,
+:host .month-item-header .button-next-month.disabled {
+  pointer-events: none;
+}
+
+:host(.small.single) vega-dropdown .month-item-name span {
+  max-width: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :host(.small) {
   --vega-litepicker-day-width: 28px;
   --vega-litepicker-day-height: 28px;
   --vega-date-picker-calendar-range-space-size: 16px;
 }
+:host(.small) .current-month-year {
+  text-align: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .month-item-header {
+  gap: 8px;
+  margin-bottom: 12px;
+}
+:host(.small) .month-item-header .button-today {
+  height: 16px;
+}
+:host(.small) .month-item-header .month-item-name,
+:host(.small) .month-item-header .month-item-year {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .month-item-header .month-item-name,
+  :host(.small) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .month-item-header .month-item-name,
+  :host(.small) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .month-item-header .month-item-name,
+  :host(.small) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .month-item-header .month-item-name {
+  margin-right: 4px;
+}
+:host(.small) .month-item-header vega-dropdown .month-item-name {
+  margin-right: 8px;
+}
+:host(.small) .month-item-header vega-dropdown .month-item-name,
+:host(.small) .month-item-header vega-dropdown .month-item-year {
+  border-radius: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  gap: 2px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .month-item-header vega-dropdown .month-item-name,
+  :host(.small) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .month-item-header vega-dropdown .month-item-name,
+  :host(.small) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .month-item-header vega-dropdown .month-item-name,
+  :host(.small) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+:host(.small) .month-item-header vega-dropdown .month-item-name vega-icon,
+:host(.small) .month-item-header vega-dropdown .month-item-year vega-icon {
+  width: 12px;
+  height: 12px;
+}
+:host(.small) .month-item-header .small-month-item-name {
+  margin-right: 8px;
+}
+:host(.small) .month-item-header .small-month-item-name::part(label-container),
+:host(.small) .month-item-header .small-month-item-year::part(label-container) {
+  font-size: 14px;
+}
+:host(.small) .month-item .current-month-year {
+  margin-bottom: 4px;
+}
 :host(.small) .calendar .container__main {
   max-width: 360px;
   max-height: 360px;
@@ -211,6 +383,131 @@
   --vega-litepicker-day-height: 40px;
   --vega-date-picker-calendar-range-space-size: 24px;
 }
+:host(.regular) .current-month-year {
+  text-align: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .month-item-header {
+  gap: 16px;
+  margin-bottom: 24px;
+}
+:host(.regular) .month-item-header .button-today {
+  height: 16px;
+}
+:host(.regular) .month-item-header .button-today.with-label {
+  height: 18px;
+}
+:host(.regular) .month-item-header .month-item-name,
+:host(.regular) .month-item-header .month-item-year {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .month-item-header .month-item-name,
+  :host(.regular) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .month-item-header .month-item-name,
+  :host(.regular) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .month-item-header .month-item-name,
+  :host(.regular) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .month-item-header .month-item-name {
+  margin-right: 4px;
+}
+:host(.regular) .month-item-header vega-dropdown .month-item-name {
+  margin-right: 16px;
+}
+:host(.regular) .month-item-header vega-dropdown .month-item-name,
+:host(.regular) .month-item-header vega-dropdown .month-item-year {
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .month-item-header vega-dropdown .month-item-name,
+  :host(.regular) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .month-item-header vega-dropdown .month-item-name,
+  :host(.regular) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .month-item-header vega-dropdown .month-item-name,
+  :host(.regular) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+:host(.regular) .month-item .current-month-year {
+  margin-bottom: 12px;
+}
 :host(.regular) .calendar .container__main {
   max-width: 450px;
   max-height: 450px;
@@ -354,6 +651,144 @@
   --vega-litepicker-day-height: 56px;
   --vega-date-picker-calendar-range-space-size: 40px;
 }
+:host(.large) .current-month-year {
+  text-align: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .month-item-header {
+  gap: 16px;
+  margin-bottom: 24px;
+}
+:host(.large) .month-item-header .button-today {
+  height: 16px;
+}
+:host(.large) .month-item-header .button-today.with-label {
+  height: 24px;
+}
+:host(.large) .month-item-header .month-item-name {
+  margin-right: 4px;
+}
+:host(.large) .month-item-header .month-item-name,
+:host(.large) .month-item-header .month-item-year {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+  gap: 8px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .month-item-header .month-item-name,
+  :host(.large) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .month-item-header .month-item-name,
+  :host(.large) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .month-item-header .month-item-name,
+  :host(.large) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .month-item-header vega-dropdown .month-item-name {
+  margin-right: 24px;
+}
+:host(.large) .month-item-header vega-dropdown .month-item-name,
+:host(.large) .month-item-header vega-dropdown .month-item-year {
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .month-item-header vega-dropdown .month-item-name,
+  :host(.large) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .month-item-header vega-dropdown .month-item-name,
+  :host(.large) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .month-item-header vega-dropdown .month-item-name,
+  :host(.large) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .month-item .current-month-year {
+  margin-bottom: 16px;
+}
 :host(.large) .calendar .container__main {
   max-width: 600px;
   max-height: 600px;
@@ -574,7 +1009,6 @@
 
 .calendar .container__months .month-item:nth-child(2)::before {
   background-color: rgba(var(--v-bg-divider, 171, 198, 216, 1));
-  margin-top: 32px;
   margin-bottom: 32px;
   position: absolute;
   top: 0px;
@@ -587,89 +1021,11 @@
   display: block;
 }
 
-.calendar .container__months .month-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-align: center;
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .calendar .container__months .month-item-header {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .calendar .container__months .month-item-header {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .calendar .container__months .month-item-header {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-  }
-}
-
-.calendar .container__months .month-item-header div > .month-item-name {
-  margin-right: 5px;
-}
-
-.calendar .container__months .month-item-header .button-previous-month,
-.calendar .container__months .month-item-header .button-next-month {
-  visibility: hidden;
-  text-decoration: none;
-  cursor: default;
-}
-
-.calendar .container__months .month-item-header .button-previous-month *,
-.calendar .container__months .month-item-header .button-next-month * {
-  pointer-events: none;
-}
-
-.calendar .container__months .month-item-header .button-previous-month > svg,
-.calendar .container__months .month-item-header .button-previous-month > img {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
-
-.calendar .container__months .month-item-header .button-next-month > svg,
-.calendar .container__months .month-item-header .button-next-month > img {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
-
 .calendar .container__months .month-item-weekdays-row {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
   place-items: center;
 }
 
-.calendar .container__months .month-item:first-child .button-previous-month {
-  visibility: visible;
-}
-
-.calendar .container__months .month-item:last-child .button-next-month {
-  visibility: visible;
-}
-
-.calendar .container__months .month-item.no-previous-month .button-previous-month {
-  visibility: hidden;
-}
-
-.calendar .container__months .month-item.no-next-month .button-next-month {
-  visibility: hidden;
-}
-
 .calendar .container__days {
   text-align: center;
   place-items: center;
@@ -1027,33 +1383,4 @@ html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after {
 }
 .calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
   color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
-}
-
-.locked-month-button {
-  width: 32px;
-  height: 32px;
-}
-
-vega-dropdown .month-item-name,
-vega-dropdown .month-item-year {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  cursor: pointer;
-}
-vega-dropdown.active .month-item-name,
-vega-dropdown.active .month-item-year {
-  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
-}
-vega-dropdown.active .month-item-name:active,
-vega-dropdown.active .month-item-year:active {
-  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
-}
-vega-dropdown.active .month-item-name:hover,
-vega-dropdown.active .month-item-year:hover {
-  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
-}
-vega-dropdown.active .month-item-name:focus-visible,
-vega-dropdown.active .month-item-year:focus-visible {
-  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -21,6 +21,7 @@ import { VegaDatePickerCalendarMinMaxDateController } from './slimmers/controlle
 import { VegaDatePickerCalendarAllowRepickController } from './slimmers/controllers/vega-date-picker-calendar-allow-repick-controller';
 import { DeviceType } from '../../../types/ui.type';
 import { getDeviceType } from '../../../utils/ui';
+import { VegaDatePickerCalendarHeaderRenderer } from './slimmers/renderers/vega-date-picker-calendar-header-render';
 /**
  * @vegaVersion 2.0.0
  */
@@ -29,6 +30,7 @@ export class VegaDatePickerCalendar {
     this.globalSlimmers = {};
     this.renderer = new VegaDatePickerCalendarRenderer();
     this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
+    this.headerRenderer = new VegaDatePickerCalendarHeaderRenderer();
     this.translationSlimmer = new TranslationSlimmer();
     this.todayController = new VegaDatePickerCalendarTodayController();
     this.selectionController = new VegaDatePickerCalendarSelectionController();
@@ -665,6 +667,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "headerRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-search-controller.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
 /**
  * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
  * and filtering dropdown items based on a search string.
@@ -50,6 +51,7 @@ export class VegaDropdownSearchController extends VegaSlimmer {
     if (searchResult)
       return searchResult;
     source.forEach((item) => {
+      item.label = sanitizeHtmlLabel(item.label);
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);
         if (filtered.length > 0) {
@@ -84,7 +86,9 @@ export class VegaDropdownSearchController extends VegaSlimmer {
    * then returned.
    */
   replaceLabelBySearchString(label) {
-    return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
+    const escaped = this.searchString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const flags = 'g' + (this.caseSensitive ? '' : 'i');
+    return label.replace(new RegExp(`(${escaped})`, flags), `<b>$1</b>`);
   }
 }
 __decorate([

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-source-controller.js

@@ -23,6 +23,10 @@ export class VegaDropdownSourceController extends VegaSlimmer {
   watchSource() {
     this.handleSource();
   }
+  /** watchCaseSensitive */
+  watchCaseSensitive() {
+    this.handleSource();
+  }
   /**
    * The function sets the source for rendering by searching for a formatted source.
    */
@@ -66,3 +70,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
+__decorate([
+  MapToComponentMethod('watchCaseSensitive')
+], VegaDropdownSourceController.prototype, "watchCaseSensitive", null);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { sanitizeHtmlLabel } from '../../../../../utils/sanitize';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -60,7 +61,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     }
     else {
       return (h(Fragment, null,
-        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label", ref: this.setLabelRef }),
+        h("span", { class: "vega-dropdown-item-label", innerHTML: sanitizeHtmlLabel(this.label), ref: this.setLabelRef }),
         h("span", { class: "v-hidden" },
           h("slot", null))));
     }
@@ -80,7 +81,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         if (ref) {
           this.tooltipRef = ref;
         }
-      }, text: this.label.replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
+      }, text: sanitizeHtmlLabel(this.label).replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: () => {
         const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;