@heartlandone/vega 1.45.0 → 1.46.0

package/dist/cjs/componentLoadRequired-bcc5c8a1.js

@@ -0,0 +1,48 @@
+'use strict';
+
+/**
+ * Wrap the method to make sure when the method is invoked, it will only be essentially running after the component is load
+ * For example in {@link VegaDatePicker},
+ * we want to make sure when {@code @Watch('value')} method is invoked, it should wait for the component is loaded before executing
+ *
+ * @returns {Function} The function decorated
+ */
+function ComponentLoadRequired() {
+  return (componentClass, _decoratedMethodName, decoratedMethod) => {
+    const renderedInstanceSet = new Set();
+    const { componentDidLoad, disconnectedCallback, connectedCallback } = componentClass;
+    /* eslint-disable jsdoc/require-jsdoc */
+    componentClass.componentDidLoad = function () {
+      renderedInstanceSet.add(this);
+      return componentDidLoad && componentDidLoad.call(this);
+    };
+    componentClass.disconnectedCallback = function () {
+      renderedInstanceSet.delete(this);
+      this.componentDidLoadedFlag = true;
+      return disconnectedCallback && disconnectedCallback.call(this);
+    };
+    componentClass.connectedCallback = function () {
+      this.componentDidLoadedFlag && renderedInstanceSet.add(this);
+      return connectedCallback && connectedCallback.call(this);
+    };
+    const originalMethodBody = decoratedMethod.value;
+    /* eslint-disable jsdoc/require-jsdoc */
+    decoratedMethod.value = function (...args) {
+      if (renderedInstanceSet.has(this)) {
+        return originalMethodBody.apply(this, args);
+      }
+      return new Promise((resolve) => {
+        const waitForComponentReady = () => {
+          if (renderedInstanceSet.has(this)) {
+            return resolve(originalMethodBody.apply(this, args));
+          }
+          setTimeout(waitForComponentReady, 30);
+        };
+        waitForComponentReady();
+      });
+    };
+    return decoratedMethod;
+  };
+}
+
+exports.ComponentLoadRequired = ComponentLoadRequired;

package/dist/cjs/{designToken-a50a38a4.js → designToken-14ac9337.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-const typeGuard = require('./typeGuard-9a59ac0e.js');
+const typeGuard = require('./typeGuard-f648ca22.js');
 const breakpoints = require('./breakpoints-23bb4f74.js');
 const log = require('./log-5d8066e0.js');
-const responsiveFormatFacade = require('./responsiveFormatFacade-0277ef3c.js');
+const responsiveFormatFacade = require('./responsiveFormatFacade-82b43462.js');
+const typography = require('./typography-358013af.js');
 
 /**
  * It logs a warning message to the console.
@@ -174,6 +175,20 @@ function formatAndValidResponsiveToken(token, flag) {
     return responsiveFormatFacade.ResponsiveFormatFacade.format(token, flag);
   }
 }
+/**
+ * The function `formatAndValidTypographyToken` formats a typography token by adding a prefix and checks if it is a valid typography token.
+ *
+ * @param {string} token - The `token` parameter is a string that represents a typography token.
+ * @returns {string} a string value.
+ */
+function formatAndValidTypographyToken(token) {
+  if (typeGuard.isTypographyTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('font', token, typography.TypographyKeys);
+  }
+}
 
 exports.formatAndValidBackgroundColor = formatAndValidBackgroundColor;
 exports.formatAndValidBorderColor = formatAndValidBorderColor;
@@ -185,3 +200,4 @@ exports.formatAndValidPadding = formatAndValidPadding;
 exports.formatAndValidResponsiveToken = formatAndValidResponsiveToken;
 exports.formatAndValidShadow = formatAndValidShadow;
 exports.formatAndValidTextColor = formatAndValidTextColor;
+exports.formatAndValidTypographyToken = formatAndValidTypographyToken;

package/dist/cjs/{elementAppender-df5ed3ca.js → elementAppender-d84f358b.js}

@@ -2,8 +2,8 @@
 
 const log = require('./log-5d8066e0.js');
 const ui = require('./ui-bac156c5.js');
-const typeGuard = require('./typeGuard-9a59ac0e.js');
-const responsiveFormatFacade = require('./responsiveFormatFacade-0277ef3c.js');
+const typeGuard = require('./typeGuard-f648ca22.js');
+const responsiveFormatFacade = require('./responsiveFormatFacade-82b43462.js');
 const ui$1 = require('./ui-824caf47.js');
 const zIndexManager = require('./zIndexManager-d5650f0d.js');
 
@@ -29,9 +29,9 @@ const getPositionBox = (container, element, target, placement, alignment, transl
   }
   const placements = getPlacements(placement);
   const alignments = getAlignments(alignment);
-  const targetBox = getTargetPositionBox(target, container);
-  const elementBox = getElementPositionBox(element);
-  const containerBox = getContainerPositionBox(container);
+  const targetBox = getTargetBoundBox(target, container);
+  const elementBox = getElementBoundBox(element);
+  const containerBox = getElementScrollDimension(container);
   const suitablePlacement = getSuitablePlacement(containerBox, elementBox, targetBox, placements);
   const suitableAlignment = getSuitableAlignment(containerBox, elementBox, targetBox, suitablePlacement, alignments);
   const positionBox = calculatePosition(elementBox, targetBox, suitablePlacement, suitableAlignment);
@@ -45,7 +45,7 @@ const getPositionBox = (container, element, target, placement, alignment, transl
 /**
  * It returns the translocation of the element relative to the target element
  *
- * @param {PlacementType} originPlacement - The origin placement of the element.
+ * @param {Nullable<PlacementType>} originPlacement - The origin placement of the element.
  * @param {PlacementType} placement - The suitable placement of the element.
  * @param {TranslocationType} translocation - TranslocationType
  * @returns {TranslocationType} A translocation object with X and Y properties.
@@ -56,8 +56,12 @@ function getTranslocationBox(originPlacement, placement, translocation) {
     let xValue = translocation.X;
     let yValue = translocation.Y;
     // If originPlacement and placement is not in same axis, it should reverse axis.
-    if ((['left', 'right'].includes(originPlacement) && ['top', 'bottom'].includes(placement)) ||
-      (['top', 'bottom'].includes(originPlacement) && ['left', 'right'].includes(placement))) {
+    if ((originPlacement &&
+      ['left', 'right'].includes(originPlacement) &&
+      ['top', 'bottom'].includes(placement)) ||
+      (originPlacement &&
+        ['top', 'bottom'].includes(originPlacement) &&
+        ['left', 'right'].includes(placement))) {
       xValue = translocation.Y;
       yValue = translocation.X;
     }
@@ -115,8 +119,8 @@ function getAlignments(alignment) {
 /**
  * It takes a placement, a target box, and a element box, and returns an element box
  *
- * @param {ElementPositionBox} elementBox - The position of the element element.
- * @param {ElementPositionBox} targetBox - The position of the target element.
+ * @param {ElementBoundBox} elementBox - The position of the element element.
+ * @param {ElementBoundBox} targetBox - The position of the target element.
  * @param {PlacementType} placement - The placement of the element.
  * @param {PositionAlignmentType} alignment - The alignment of the element
  * @returns {ElementPositionBox} An object with top and left properties.
@@ -130,8 +134,8 @@ function calculatePosition(elementBox, targetBox, placement, alignment) {
 /**
  * Calculate the left position of the element
  *
- * @param {ElementPositionBox} elementBox - The position box of the element.
- * @param {ElementPositionBox} targetBox - The position box of the target element that is attached to.
+ * @param {ElementBoundBox} elementBox - The position box of the element.
+ * @param {ElementBoundBox} targetBox - The position box of the target element that is attached to.
  * @param {PlacementType} placement - The placement of the element.
  * @param {PositionAlignmentType} alignment - The alignment of the element
  * @returns {number} The left position of the element.
@@ -156,13 +160,16 @@ function calculateLeft(elementBox, targetBox, placement, alignment) {
     case 'right': {
       return targetBox.left + targetBox.width;
     }
+    /* istanbul ignore next */
+    default:
+      throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
   }
 }
 /**
  * Calculate the top position of the element
  *
- * @param {ElementPositionBox} elementBox - The position box of the element.
- * @param {ElementPositionBox} targetBox - The position box of the target element that is attached to.
+ * @param {ElementBoundBox} elementBox - The position box of the element.
+ * @param {ElementBoundBox} targetBox - The position box of the target element that is attached to.
  * @param {PlacementType} placement - The placement of the element.
  * @param {PositionAlignmentType} alignment - The alignment of the element
  * @returns {number} the top position of the element.
@@ -187,15 +194,18 @@ function calculateTop(elementBox, targetBox, placement, alignment) {
     case 'bottom': {
       return targetBox.top + targetBox.height;
     }
+    /* istanbul ignore next */
+    default:
+      throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
   }
 }
 /**
  * It takes a list of placements and returns the first placement that has enough space to place the
  * element
  *
- * @param {ElementPositionBox} containerBox - The box of the container element.
- * @param {ElementPositionBox} elementBox - The box of the element to be placed.
- * @param {ElementPositionBox} targetBox - The box of the target element.
+ * @param {ElementScrollDimension} containerBox - The box of the container element.
+ * @param {ElementBoundBox} elementBox - The box of the element to be placed.
+ * @param {ElementBoundBox} targetBox - The box of the target element.
  * @param {PlacementType[]} placements - The placements that we want to try.
  * @returns {PlacementType} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
  */
@@ -216,9 +226,9 @@ function getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
 /**
  * It takes a list of alignments and returns the suitable one that has enough space to fit the element
  *
- * @param {ElementPositionBox} containerBox - The bounding box of the container element.
- * @param {ElementPositionBox} elementBox - The box of the element that we want to position.
- * @param {ElementPositionBox} targetBox - The box of the element that the element to be positioned is aligned to.
+ * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+ * @param {ElementBoundBox} elementBox - The box of the element that we want to position.
+ * @param {ElementBoundBox} targetBox - The box of the element that the element to be positioned is aligned to.
  * @param {PlacementType} placement - The placement of the element relative to the target.
  * @param {PositionAlignmentType[]} alignments - An array of alignments to try.
  * @returns {PositionAlignmentType} the alignment that is suitable for the element.
@@ -240,9 +250,9 @@ const getSuitableAlignment = (containerBox, elementBox, targetBox, placement, al
 /**
  * Whether the alignment space is enough
  *
- * @param {ElementPositionBox} containerBox - The bounding box of the container element.
- * @param {ElementPositionBox} targetBox - The position of the target element.
- * @param {ElementPositionBox} elementBox - The box of the element that we're trying to position.
+ * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+ * @param {ElementBoundBox} targetBox - The position of the target element.
+ * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
  * @param {PlacementType} placement - The placement of the element relative to the target.
  * @param {PlacementType} alignment - The alignment of the element relative to the target.
  * @returns {boolean} return true if it has enough space, otherwise false
@@ -276,6 +286,8 @@ function hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement,
       }
     }
   }
+  /* istanbul ignore next */
+  return false;
 }
 /**
  * If the placement is top or left, then the target's top or left position must be greater than or
@@ -283,10 +295,10 @@ function hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement,
  * height or width minus the target's top or left position minus the target's height or width must be
  * greater than or equal to the element's height or width.
  *
- * @param {ElementPositionBox} containerBox - The bounding box of the container element.
+ * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
  * @param {PlacementType} placement - The placement of the element.
- * @param {ElementPositionBox} targetBox - The position of the target element.
- * @param {ElementPositionBox} elementBox - The dimensions of the element to be positioned.
+ * @param {ElementBoundBox} targetBox - The position of the target element.
+ * @param {ElementBoundBox} elementBox - The dimensions of the element to be positioned.
  * @returns {boolean} A boolean value.
  */
 function hasEnoughSpace(containerBox, placement, targetBox, elementBox) {
@@ -300,15 +312,17 @@ function hasEnoughSpace(containerBox, placement, targetBox, elementBox) {
     case 'right':
       return containerBox.width - targetBox.left - targetBox.width >= elementBox.width;
   }
+  /* istanbul ignore next */
+  return false;
 }
 /**
  * It returns the position of an element relative to its container and also includes the scroll height of container.
  *
  * @param {HTMLElement} target - The element that you want to position.
  * @param {HTMLElement} container - The container element that the target element is inside of.
- * @returns {ElementPositionBox} An object with the properties width, height, top, and left.
+ * @returns {ElementBoundBox} An object with the properties width, height, top, and left.
  */
-function getTargetPositionBox(target, container) {
+function getTargetBoundBox(target, container) {
   const containerRect = container.getBoundingClientRect();
   const targetRect = target.getBoundingClientRect();
   const targetTop = targetRect.top - containerRect.top + container.scrollTop;
@@ -330,9 +344,9 @@ function getTargetPositionBox(target, container) {
  * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
  *
  * @param {HTMLElement} element - HTMLElement - The element to get the position box for.
- * @returns {ElementPositionBox} An object with the width, height, and top properties of the element.
+ * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
  */
-function getElementPositionBox(element) {
+function getElementBoundBox(element) {
   const isElementHide = element.classList.contains('vega-force-hidden');
   if (isElementHide)
     element.classList.remove('vega-force-hidden');
@@ -354,9 +368,9 @@ function getElementPositionBox(element) {
  *
  * @param {HTMLElement} container - The container element that the tooltip will be positioned relative
  * to.
- * @returns {ElementPositionBox} An object with two properties: width and height.
+ * @returns {ElementScrollDimension} An object with two properties: width and height.
  */
-function getContainerPositionBox(container) {
+function getElementScrollDimension(container) {
   return {
     width: container.scrollWidth,
     height: container.scrollHeight,
@@ -399,15 +413,11 @@ class ElementAppender {
     this.setShowConfig();
     if (!this.showConfig.target) {
       log.LogUtility.error(`No target element found, please add it at new elementAppender.`);
-      return null;
+      return;
     }
     if (!this.showConfig.appendableElement) {
       log.LogUtility.error(`No appendable element found, please add it at new elementAppender.`);
-      return null;
-    }
-    if (!this.container) {
-      log.LogUtility.error(`No container element found, Please confirm that the position-relative-to property is setting correctly.`);
-      return null;
+      return;
     }
     /* A function that takes no parameters and returns nothing. It sets the position of the appendable
     element. */
@@ -463,7 +473,10 @@ class ElementAppender {
    * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
    */
   saveVisibleAppendElement(appendableElement) {
-    ElementAppender.containerMap.get(this.container).visibleAppendElements.add(appendableElement);
+    const containerState = ElementAppender.containerMap.get(this.container);
+    if (containerState) {
+      containerState.visibleAppendElements.add(appendableElement);
+    }
   }
   /**
    * Remove the AppendableElement from the container state.
@@ -512,7 +525,10 @@ class ElementAppender {
   setShowConfigContainer() {
     let container = document.body;
     if (this.showConfig.positionRelativeTo) {
-      container = document.querySelector(this.showConfig.positionRelativeTo);
+      const positionRelativeContainer = document.querySelector(this.showConfig.positionRelativeTo);
+      if (positionRelativeContainer) {
+        container = positionRelativeContainer;
+      }
     }
     else {
       const parentPopover = ui$1.findParent(this.showConfig.target, '.vega-popover');
@@ -527,7 +543,7 @@ class ElementAppender {
         }
       }
     }
-    container === null || container === void 0 ? void 0 : container.append(this.showConfig.appendableElement);
+    container.append(this.showConfig.appendableElement);
     this.container = container;
   }
   /**
@@ -612,7 +628,8 @@ class ElementAppender {
    * @returns {void}
    */
   adjustPosition() {
-    const translocation = responsiveFormatFacade.ResponsiveFormatFacade.format(this.showConfig.translocation, 'translocation');
+    const translocation = this.showConfig.translocation &&
+      responsiveFormatFacade.ResponsiveFormatFacade.format(this.showConfig.translocation, 'translocation');
     const positionBox = getPositionBox(this.container, this.showConfig.appendableElement, this.showConfig.target, this.showConfig.placement, this.showConfig.alignment, translocation);
     this.showConfig.appendableElement.style.left = `${positionBox.left}px`;
     this.showConfig.appendableElement.style.top = `${positionBox.top}px`;

package/dist/cjs/{formFieldControllerSlimmer-bb4530a5.js → formFieldControllerSlimmer-4bd62d43.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const vegaSlimmer = require('./vega-slimmer-5503957a.js');
-const mapToComponentMethod = require('./map-to-component-method-a3eb6fe7.js');
+const vegaSlimmer = require('./vega-slimmer-c554cd02.js');
+const mapToComponentMethod = require('./map-to-component-method-30d54832.js');
 const featureFlagController = require('./featureFlagController-1ed087d2.js');
 const string = require('./string-21427167.js');
 const changeManager = require('./changeManager-d4738fdb.js');

package/dist/cjs/index-0ca30e90.js

@@ -1829,6 +1829,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './vega-field-error.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'vega-font.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './vega-font.cjs.entry.js')); }).then(processMod, consoleError);
         case 'vega-header.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/index.cjs.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const breakpoints = require('./breakpoints-07fcbeba.js');
 const log = require('./log-5d8066e0.js');
-const designToken = require('./designToken-a50a38a4.js');
+const designToken = require('./designToken-14ac9337.js');
 const string = require('./string-21427167.js');
-const typeGuard = require('./typeGuard-9a59ac0e.js');
+const typeGuard = require('./typeGuard-f648ca22.js');
 const breakpoints$1 = require('./breakpoints-23bb4f74.js');
 const icons = require('./icons-44ed411d.js');
-const typography = require('./typography-9f9d8d04.js');
+const typography = require('./typography-358013af.js');
 const ui = require('./ui-bac156c5.js');
 const featureFlagController = require('./featureFlagController-1ed087d2.js');
 const themeManager = require('./themeManager-6ba8be2a.js');
 const vegaDialogController = require('./vegaDialogController-d2ae40fb.js');
-require('./responsiveFormatFacade-0277ef3c.js');
+require('./responsiveFormatFacade-82b43462.js');
 require('./number-7e7d9981.js');
 require('./misc-3d30df91.js');
 require('./ui-824caf47.js');
@@ -55,6 +55,7 @@ exports.Breakpoints = breakpoints$1.Breakpoints;
 exports.Icons = icons.Icons;
 exports.getIconFromToken = icons.getIconFromToken;
 exports.Typography = typography.Typography;
+exports.TypographyKeys = typography.TypographyKeys;
 exports.BreakpointKeys = ui.BreakpointKeys;
 exports.FeatureFlag = featureFlagController.FeatureFlag;
 exports.VegaLoader = themeManager.VegaLoader;

package/dist/cjs/{injectElementAppender-406fccd8.js → injectElementAppender-cd0943d5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const elementAppender = require('./elementAppender-df5ed3ca.js');
+const elementAppender = require('./elementAppender-d84f358b.js');
 const ui = require('./ui-824caf47.js');
 
 /**

package/dist/cjs/{injectKeyboardManager-e708eae2.js → injectKeyboardManager-ee7afa46.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const keyboardManager = require('./keyboardManager-51dab713.js');
+const keyboardManager = require('./keyboardManager-6995c418.js');
 
 /**
  * It takes a function that returns an array of keyboard event listeners, and returns a decorator

package/dist/cjs/{keyboardManager-51dab713.js → keyboardManager-6995c418.js}

@@ -71,8 +71,8 @@ class KeyboardManager {
    * @returns {boolean} - should invoke
    */
   shouldInvokeListener(listener, keyCode) {
-    let activeElementInScope;
-    let activeElementOutScope;
+    let activeElementInScope = [];
+    let activeElementOutScope = [];
     const isKeyCodeAccepted = Array.isArray(listener.keyCode)
       ? listener.keyCode.includes(keyCode)
       : listener.keyCode === keyCode;

package/dist/cjs/keyboardManagerSlimmer-cfbaaf36.js

@@ -0,0 +1,210 @@
+'use strict';
+
+const vegaSlimmer = require('./vega-slimmer-c554cd02.js');
+const mapToComponentMethod = require('./map-to-component-method-30d54832.js');
+const elementAppender = require('./elementAppender-d84f358b.js');
+const ui = require('./ui-824caf47.js');
+const keyboardManager = require('./keyboardManager-6995c418.js');
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class ElementAppenderSlimmer extends vegaSlimmer.VegaSlimmer {
+  constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow') {
+    super();
+    /**
+     * It adds event listeners to the target and the appendable element
+     */
+    this.registerElementAppenderListener = () => {
+      var _a, _b, _c, _d, _e;
+      this.unRegisterElementAppenderListener();
+      (_a = this.showConfig.target) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.targetClickHandler);
+      (_b = this.showConfig.target) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.targetMouseEnterHandler);
+      (_c = this.showConfig.target) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.targetMouseLeaveHandler);
+      (_d = this.showConfig.appendableElement) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseenter', this.elementMouseEnterHandler);
+      (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseleave', this.elementMouseLeaveHandler);
+      window.addEventListener('mousedown', this.globalMouseDownHandler);
+    };
+    /* It's a function that listens to the click event on the dropdown. It checks if the trigger
+    property is equal to 'click'. If it is, then it toggles the dropdown. */
+    this.targetClickHandler = () => {
+      if (this.shouldListenerWork('click')) {
+        this.isShowing() ? this.hide() : this.show();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.targetMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.isShowing() === false && this.show();
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.targetMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.elementMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.elementMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
+    and if the target of the event is not a child of the dropdown or the trigger. If it is, then it
+    hides the dropdown. */
+    this.globalMouseDownHandler = (e) => {
+      if (this.shouldListenerWork('custom') &&
+        this.isShowing() &&
+        !ui.isParent(e.target, this.showConfig.appendableElement) &&
+        !ui.isParent(e.target, this.showConfig.target) &&
+        ui.findParent(e.target, 'vega-modal') ===
+          ui.findParent(this.showConfig.target, 'vega-modal')) {
+        this.hide();
+      }
+    };
+    /* A timer that will hide the dropdown after a certain amount of time. */
+    this.createDelayHideTimer = () => {
+      this.delayHideTimer = setTimeout(() => {
+        this.hide();
+        clearTimeout(this.delayHideTimer);
+      }, ElementAppenderSlimmer.DELAY_HIDE_TIME);
+    };
+    /* A function that clears the timer. */
+    this.clearDelayHideTimer = () => {
+      this.delayHideTimer && clearTimeout(this.delayHideTimer);
+    };
+    /* It's a function that checks if the listener should work or not. */
+    this.shouldListenerWork = (trigger) => {
+      const currentTrigger = this.getTrigger();
+      switch (trigger) {
+        case 'custom':
+          return currentTrigger !== 'none';
+        case 'click':
+          return currentTrigger === 'click';
+        case 'hover':
+          return currentTrigger === 'hover';
+      }
+      /* istanbul ignore next */
+      throw new Error(`Unexpected trigger: ${trigger}. Expected values are custom, click, or hover.`);
+    };
+    this.showConfigFactory = showConfigFactory;
+    this.getTrigger = getTrigger;
+    this.isDropdownShowName = isDropdownShowName;
+  }
+  connectedCallback() {
+    if (this.elementAppender === null) {
+      this.setElementAppender();
+      this.registerElementAppenderListener();
+    }
+  }
+  disconnectedCallback() {
+    this.unRegisterElementAppenderListener();
+    if (this.elementAppender) {
+      this.elementAppender.destroy();
+      this.elementAppender = null;
+    }
+  }
+  componentDidLoad() {
+    this.setShowConfig();
+    this.setElementAppender();
+    this.registerElementAppenderListener();
+  }
+  getElementAppender() {
+    return this.elementAppender;
+  }
+  show() {
+    this.elementAppender && this.elementAppender.show();
+    this[this.isDropdownShowName] = true;
+  }
+  hide() {
+    this.elementAppender && this.elementAppender.hide();
+    this[this.isDropdownShowName] = false;
+  }
+  destroy() {
+    this.elementAppender = null;
+    this[this.isDropdownShowName] = false;
+  }
+  setElementAppender() {
+    this.elementAppender = new elementAppender.ElementAppender(this.showConfigFactory, this);
+  }
+  isShowing() {
+    return this[this.isDropdownShowName];
+  }
+  setShowConfig() {
+    this.showConfig = this.showConfigFactory();
+  }
+  /**
+   * It removes all event listeners that were added in the `register()` function
+   */
+  unRegisterElementAppenderListener() {
+    var _a, _b, _c, _d, _e;
+    (_a = this.showConfig.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.targetClickHandler);
+    (_b = this.showConfig.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.targetMouseEnterHandler);
+    (_c = this.showConfig.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
+    (_d = this.showConfig.appendableElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.elementMouseEnterHandler);
+    (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.elementMouseLeaveHandler);
+    window.removeEventListener('mousedown', this.globalMouseDownHandler);
+  }
+}
+ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
+__decorate$1([
+  mapToComponentMethod.MapToComponentMethod('connectedCallback')
+], ElementAppenderSlimmer.prototype, "connectedCallback", null);
+__decorate$1([
+  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+], ElementAppenderSlimmer.prototype, "disconnectedCallback", null);
+__decorate$1([
+  mapToComponentMethod.MapToComponentMethod('componentDidLoad')
+], ElementAppenderSlimmer.prototype, "componentDidLoad", null);
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class KeyboardManagerSlimmer extends vegaSlimmer.VegaSlimmer {
+  constructor(listenersRetriever) {
+    super();
+    this.listenersRetriever = listenersRetriever;
+  }
+  connectedCallback() {
+    this.keyboardEventListeners && keyboardManager.KeyboardManager.register(this.keyboardEventListeners);
+  }
+  disconnectedCallback() {
+    keyboardManager.KeyboardManager.deregister(this.keyboardEventListeners);
+  }
+  componentDidLoad() {
+    this.keyboardEventListeners = this.listenersRetriever(this);
+    keyboardManager.KeyboardManager.register(this.keyboardEventListeners);
+  }
+}
+__decorate([
+  mapToComponentMethod.MapToComponentMethod('connectedCallback')
+], KeyboardManagerSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+], KeyboardManagerSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  mapToComponentMethod.MapToComponentMethod('componentDidLoad')
+], KeyboardManagerSlimmer.prototype, "componentDidLoad", null);
+
+exports.ElementAppenderSlimmer = ElementAppenderSlimmer;
+exports.KeyboardManagerSlimmer = KeyboardManagerSlimmer;

package/dist/cjs/{legendInputProcessor-b6868e9e.js → legendInputProcessor-c96488db.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const array$2 = require('./array-e1e5ed1d.js');
-const typography = require('./typography-9f9d8d04.js');
+const typography = require('./typography-358013af.js');
 
 /** The GraphContextFactory class provides a method to create and return either a HTMLCanvasElement or SVGElement based on the specified mode and container element. */
 class GraphContextFactory {