@heartlandone/vega 2.79.0 → 2.81.0

package/dist/cjs/date-required-rule-4377217a.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const typeGuard = require('./type-guard-362d7da3.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
+
+/**
+ * A rule that checks if date is empty or not
+ *
+ * @augments {InternalFormFieldValidationRule<string | string[]>}
+ */
+class DateRequiredRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
+  /**
+   * It creates a new instance of the class with the given config.
+   *
+   * @param {{ mode: 'single' | 'range' }} config - config including the mode for date value
+   * @param {'single' | 'range'} config.mode - The mode for date value
+   */
+  constructor(config) {
+    super();
+    this.config = config;
+  }
+  /**
+   * If the input is not valid for the current mode, throw an error.
+   * Otherwise, return an object with a boolean indicating whether the input is valid and a message to display to the user
+   *
+   * @param {string | string[]} input - The value of the input field.
+   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Invalid date value ${input} for mode ${this.config.mode}`);
+    }
+    let isValid;
+    switch (this.config.mode) {
+      case 'single':
+        isValid = typeGuard.isDateStr(input);
+        break;
+      case 'range':
+        isValid = Array.isArray(input) && input.length === 2 && input.every(typeGuard.isDateStr);
+        break;
+    }
+    return {
+      isValid,
+      message: isValid ? '' : 'This field is required',
+    };
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * If the input is undefined or null, return true. Otherwise, if the mode is 'single', return true if
+   * the input is a string. Otherwise, if the mode is 'range', return true if the input is an array. Otherwise, return false.
+   *
+   * @param {unknown} input - The input value that the user has entered.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    if (input === undefined || input === null)
+      return true;
+    if (!this.config.mode) {
+      throw new Error(`Unexpected type of mode: ${this.config.mode}`);
+    }
+    switch (this.config.mode) {
+      case 'single':
+        return typeof input === 'string';
+      case 'range':
+        return Array.isArray(input);
+      default:
+        return false;
+    }
+  }
+}
+
+exports.DateRequiredRule = DateRequiredRule;

package/dist/cjs/design-token-40276b11.js

@@ -0,0 +1,402 @@
+'use strict';
+
+const typeGuard = require('./type-guard-362d7da3.js');
+const breakpoints = require('./breakpoints-ebde4837.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9cae7f27.js');
+const typography = require('./typography-4560e7f1.js');
+const ui = require('./ui-32120990.js');
+
+/**
+ * The `StateBorderColorFormatter` class in TypeScript formats border color tokens based on
+ * input values and provides an array of CSS states.
+ */
+class StateBorderColorFormatter extends typeGuard.StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover', 'active'];
+  }
+  /**
+   * The function `formatToken` takes a BorderColorsTokenType input, checks if it is a valid border
+   * color token type, and returns the corresponding CSS border-color value or logs a warning if the
+   * input is invalid.
+   *
+   * @param {BorderColorsTokenType} input - BorderColorsTokenType
+   * @returns {string} The `formatToken` function returns a string that represents a CSS style for border color
+   * based on the input `BorderColorsTokenType`. If the input is a valid border color token type, it
+   * retrieves the corresponding value from the `BorderColorMap` and returns a CSS style string with the
+   * border color value. If the input is not a valid border color token type, it logs a warning message
+   * and returns an
+   */
+  formatToken(input) {
+    if (typeGuard.isBorderColorTokenType(input)) {
+      const tokenValue = typeGuard.BorderColorMap[input];
+      return `border-color: ${tokenValue};`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The borderColor value ${input} is invalid, it must be a value of: `, typeGuard.BorderColors);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of CssStatesType objects is being returned.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateBorderColorFormatter$1 = new StateBorderColorFormatter();
+
+/**
+ * The `StateShadowFormatter` class in TypeScript formats a CSS `box-shadow` property based on a
+ * ShadowsTokenType input and provides an array of CssStatesType objects.
+ */
+class StateShadowFormatter extends typeGuard.StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover'];
+  }
+  /**
+   * The `formatToken` function in TypeScript takes a ShadowsTokenType input, validates it, and returns a
+   * formatted CSS box-shadow property string or logs a warning if the input is invalid.
+   *
+   * @param {ShadowsTokenType} input - ShadowsTokenType
+   * @returns {string} The `formatToken` function takes a `ShadowsTokenType` input and returns a CSS `box-shadow`
+   * property with the corresponding value from the `ShadowMap` object. If the input is not a valid
+   * `ShadowsTokenType`, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input) {
+    if (typeGuard.isShadowsTokenType(input)) {
+      const tokenValue = typeGuard.ShadowMap[input];
+      return `box-shadow: ${tokenValue};`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The shadow value ${input} is invalid, it must be a value of: `, typeGuard.Shadows);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]}An array of CssStatesType objects is being returned.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateShadowFormatter$1 = new StateShadowFormatter();
+
+/**
+ * The `StateBorderFormatter` class in TypeScript formats border token values into CSS border properties
+ * and provides state information.
+ */
+class StateBorderFormatter extends typeGuard.StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover', 'active'];
+  }
+  /**
+   * The `formatToken` function in TypeScript formats a border token value into a CSS border property
+   * string or logs a warning if the input is invalid.
+   *
+   * @param {BordersTokenType} input - The `formatToken` function takes a `BordersTokenType` as input
+   * and returns a formatted string representing a CSS border property based on the input token value.
+   * If the input is a valid border token type, it retrieves the corresponding CSS value from the
+   * `BorderMap` and returns it in a `border
+   * @returns {string} The `formatToken` function returns a string that represents a CSS border property based on
+   * the input `BordersTokenType`. If the input is a valid border token type, it retrieves the
+   * corresponding value from the `BorderMap` and returns a CSS `border` property string. If the input
+   * is not a valid border token type, it logs a warning message using `LogUtility.warn` and returns an
+   * empty
+   */
+  formatToken(input) {
+    if (typeGuard.isBorderTokenType(input)) {
+      const tokenValue = typeGuard.BorderMap[input];
+      return `border: ${tokenValue};`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The border value ${input} is invalid, it must be a value of: `, typeGuard.Borders);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[] } An array of objects of type CssStatesType, which represents the states.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateBorderFormatter$1 = new StateBorderFormatter();
+
+/**
+ * The `StateFormatFacade` class in TypeScript provides a method to format different types of
+ * state variants based on a specified flag.
+ */
+class StateFormatFacade {
+  /**
+   * The function `format` takes in an input and a flag, then formats the input based on the flag
+   * provided.
+   *
+   * @param {StateVariantType} input - The `input` parameter in the `format` function is of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that it expects an input value
+   * that corresponds to the specified flag and state. The `Flag` type is a key of
+   * `ManagedStateScopeInput
+   * @param {keyof ManagedStateScopeInput} flag - The `flag` parameter in the `format` function is a key of the
+   * `ManagedStateScopeInput` type. It is used to determine which formatting logic to apply based on the
+   * specific flag provided. The function then switches on the flag value to select the appropriate
+   * formatting logic for that particular flag.
+   * @returns {string} The `format` function takes in an input of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>` and a flag of type `Flag`. It then switches
+   * on the flag value and returns a formatted string based on the flag value. The return value depends
+   * on the flag value:
+   */
+  format(input, flag) {
+    switch (flag) {
+      case 'backgroundColor':
+        return typeGuard.StateBackgroundColorFormatter.format(input);
+      case 'borderColor':
+        return StateBorderColorFormatter$1.format(input);
+      case 'shadow':
+        return StateShadowFormatter$1.format(input);
+      case 'border':
+        return StateBorderFormatter$1.format(input);
+      default:
+        throw new Error(`Invalid flag ${flag} passed into StateFormatFacade`);
+    }
+  }
+}
+const StateFormatFacade$1 = new StateFormatFacade();
+
+/**
+ * It logs a warning message to the console.
+ *
+ * @param {string} tokenType - The name of the token type.
+ * @param {unknown} value - The value that was passed into the token.
+ * @param {unknown} availableOptions - The available options for the token type.
+ */
+function logInvalidValueMessage(tokenType, value, availableOptions) {
+  globalSlimmerRegistry.LogUtility.warn(`The ${tokenType} value ${value} is invalid, it must be a value of: `, availableOptions);
+}
+/**
+ * Given a token and an array of modes, return a string with the token formatted with the appropriate mode
+ *
+ * @param {string} token - The name of the token.
+ * @param {TokenMode[]} modes - TokenMode[]
+ * @returns {string} The formatted token.
+ */
+function formatTokenWithModes(token, modes) {
+  let formattedToken = '';
+  if (modes.includes('dark')) {
+    formattedToken += ` dark:v-dark-${token}`;
+  }
+  return formattedToken;
+}
+/**
+ * If the token is a valid spacing token, return the CSS class string. Otherwise, log an error message
+ *
+ * @param {unknown} token - The value that was passed into the function.
+ * @returns {Nullable<string>} The the CSS class string of the padding token.
+ */
+function formatAndValidPadding(token) {
+  if (typeGuard.isSpacingTokenType(token)) {
+    return `v-p-${token}`;
+  }
+  else {
+    logInvalidValueMessage('padding', token, Object.keys(typeGuard.Spacing));
+  }
+}
+/**
+ * The function `formatAndValidBorderStyle` formats a border style token and returns a string if it is
+ * a valid border style type, otherwise it logs an invalid value message.
+ *
+ * @param {unknown} token - The `token` parameter is a value that represents a border style type.
+ * @returns {Nullable<string>} The function `formatAndValidBorderStyle` returns a string that is formatted as
+ * `v-border-` if the `token` parameter is of a valid border style type. If the `token` is not
+ * a valid border style type, it logs an invalid value message and does not return anything (implicitly
+ * returns `undefined`).
+ */
+function formatAndValidBorderStyle(token) {
+  if (typeGuard.isBorderStyleType(token)) {
+    return `v-border-${token}`;
+  }
+  else {
+    logInvalidValueMessage('border-style', token, ui.BorderStyle);
+  }
+}
+/**
+ * If the token is a valid border radius, return a string with the token prefixed with `v-rounded-`. Otherwise, log an
+ * error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {Nullable<string>} The the CSS class string of the border radius token.
+ */
+function formatAndValidBorderRadius(token) {
+  if (typeGuard.isBorderRadiusTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('border-radius', token, Object.keys(typeGuard.BorderRadius));
+  }
+}
+/**
+ * If the token is a valid border color, return CSS class string of the border color. Otherwise, log an error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {Nullable<string>}  return the CSS class string of the border color
+ */
+function formatAndValidBorderColor(token) {
+  if (typeGuard.isBorderColorTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('border-color', token, typeGuard.Colors.filter(() => /^border-color-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid background color, return it with the v- prefix. Otherwise, log an error
+ *
+ * @param {unknown} token - The value of the token.
+ * @param {TokenMode[]} withModes - TokenMode[] = []
+ * @returns {Nullable<string>} CSS class string for the background color token with modes supported.
+ */
+function formatAndValidBackgroundColor(token, withModes = []) {
+  if (typeGuard.isBackgroundColorTokenType(token)) {
+    return `v-${token}` + formatTokenWithModes(token, withModes);
+  }
+  else {
+    logInvalidValueMessage('background-color', token, typeGuard.Colors.filter(() => /^bg-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid text color, return the token prefixed with `v-` and formatted with the given modes. Otherwise,
+ * log an error
+ *
+ * @param {unknown} token - The token to format.
+ * @param {TokenMode[]} withModes - TokenMode[] = []
+ * @returns {Nullable<string>} A CSS class string that is either a valid color or a valid color with modes.
+ */
+function formatAndValidTextColor(token, withModes = []) {
+  if (typeGuard.isTextColorTokenType(token)) {
+    return `v-${token}` + formatTokenWithModes(token, withModes);
+  }
+  else {
+    logInvalidValueMessage('text-color', token, typeGuard.Colors.filter(() => /^text-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid breakpoint, return CSS class string for the flex breakpoint. Otherwise, log an error
+ *
+ * @param {unknown} token - The value of the breakpoint.
+ * @returns {Nullable<string>} CSS class string for the flex breakpoint.
+ */
+function formatAndValidFlexBreakpoint(token) {
+  if (typeGuard.isBreakpointsTokenType(token)) {
+    return `vega-flex-${token}`;
+  }
+  else {
+    logInvalidValueMessage('breakpoint', token, Object.keys(breakpoints.Breakpoints));
+  }
+}
+/**
+ * If the token is a breakpoint, return the breakpoint value. Otherwise, log an error and return 0
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {Nullable<number>} value of the breakpoint.
+ */
+function formatAndValidBreakpointSize(token) {
+  if (typeGuard.isBreakpointsTokenType(token)) {
+    return breakpoints.Breakpoints[token];
+  }
+  else {
+    logInvalidValueMessage('breakpoint', token, Object.keys(breakpoints.Breakpoints));
+  }
+}
+/**
+ * If the token is a valid spacing token, return a string with the token name prefixed with `v-gap-`. Otherwise, log an
+ * error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {Nullable<string>} CSS class string for the given gap token.
+ */
+function formatAndValidGap(token) {
+  if (typeGuard.isSpacingTokenType(token)) {
+    return `v-gap-${token}`;
+  }
+  else {
+    logInvalidValueMessage('gap', token, Object.keys(typeGuard.Spacing));
+  }
+}
+/**
+ * If the token is a valid shadows token type, return the token with the prefix "v-". Otherwise, log an error message
+ *
+ * @param {string} token - The token to format.
+ * @param {TokenMode[]} withModes - TokenMode[] = []
+ * @returns {Nullable<string>} CSS class string of the shadow token with modes supported
+ */
+function formatAndValidShadow(token, withModes = []) {
+  if (typeGuard.isShadowsTokenType(token)) {
+    return `v-${token}` + formatTokenWithModes(token, withModes);
+  }
+  else {
+    logInvalidValueMessage('shadows', token, typeGuard.Shadows);
+  }
+}
+/**
+ * It takes a token and a flag, and returns a string
+ *
+ * @typedef Flag key of ManagedResponsiveScopeInput
+ * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} token - The token to format.
+ * @param {Flag} flag - The flag that the token is being formatted for.
+ * @returns {Nullable<ManagedResponsiveScopeOutput[Flag]>} A nullable string
+ */
+function formatAndValidResponsiveToken(token, flag) {
+  if (token !== null && token !== undefined) {
+    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 {Nullable<string>} a string value.
+ */
+function formatAndValidTypographyToken(token) {
+  if (typeGuard.isTypographyTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('font', token, typography.TypographyKeys);
+  }
+}
+/**
+ * The function `formatAndValidStateToken` formats and validates a state token based on a specified flag.
+ *
+ * @param {StateVariantType} token - The `token` parameter is a value that represents a state variant for a specific flag
+ * in a managed state scope input.
+ * @param {Flag} flag - The `flag` parameter is a key of the `ManagedStateScopeInput` type.
+ * @returns {Nullable<string>} a formatted and validated state token as a string, or `null` if the input token is `null`
+ * or `undefined`.
+ */
+function formatAndValidStateToken(token, flag) {
+  if (token !== null && token !== undefined) {
+    return StateFormatFacade$1.format(token, flag);
+  }
+}
+
+exports.formatAndValidBackgroundColor = formatAndValidBackgroundColor;
+exports.formatAndValidBorderColor = formatAndValidBorderColor;
+exports.formatAndValidBorderRadius = formatAndValidBorderRadius;
+exports.formatAndValidBorderStyle = formatAndValidBorderStyle;
+exports.formatAndValidBreakpointSize = formatAndValidBreakpointSize;
+exports.formatAndValidFlexBreakpoint = formatAndValidFlexBreakpoint;
+exports.formatAndValidGap = formatAndValidGap;
+exports.formatAndValidPadding = formatAndValidPadding;
+exports.formatAndValidResponsiveToken = formatAndValidResponsiveToken;
+exports.formatAndValidShadow = formatAndValidShadow;
+exports.formatAndValidStateToken = formatAndValidStateToken;
+exports.formatAndValidTextColor = formatAndValidTextColor;
+exports.formatAndValidTypographyToken = formatAndValidTypographyToken;

package/dist/cjs/dom-node-subject-observer-factory-9110cb94.js

@@ -0,0 +1,141 @@
+'use strict';
+
+const changeManager = require('./change-manager-a297e4d2.js');
+const observer = require('./observer-f49483e8.js');
+const ui = require('./ui-ae4ee13d.js');
+
+/** The DomNodeSubject class represents a subject related to DOM nodes. */
+class DomNodeSubject {
+  /**
+   * The constructor function takes a SubjectTitle parameter and assigns it to the private title property.
+   *
+   * @param {SubjectTitle} title - The "title" parameter is a private property of the class that is of type "SubjectTitle".
+   * @param {HTMLElement} host - The `host` parameter is an HTMLElement that represents the container or
+   * parent element where the subject title will be displayed. It is used to specify the location where
+   * the title will be rendered on the web page.
+   */
+  constructor(title, host) {
+    this.title = title;
+    this.host = host;
+  }
+  /**
+   * The getDescription function returns the title of an object as a string.
+   *
+   * @returns {string} The title of the object.
+   */
+  getDescription() {
+    return `, this is a dom nodes subject of ${this.title}.(class name:${this.host.className}, id:${this.host.id})`;
+  }
+}
+
+/** The `DomNodesSubjectFactory` class is responsible for managing and caching `DomNodeSubject` objects associated with HTML elements. */
+class DomNodeSubjectFactory {
+  constructor() {
+    this.cache = new Map();
+  }
+  /**
+   * The function `getSubject` returns the subject associated with a given node and event ID, either from the cache or by setting it if it doesn't exist.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement, which represents an element in the HTML document.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of the event for which we want to get the subject.
+   * @returns {DomNodeSubject} a `DomNodeSubject` object.
+   */
+  getSubject(node, eventId) {
+    if (this.isExist(node, eventId)) {
+      return this.cache.get(node).get(eventId);
+    }
+    else {
+      return this.setSubject(node, eventId);
+    }
+  }
+  /**
+   * The function checks if a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} node - The "node" parameter is an HTMLElement, which represents an HTML element in the DOM (Document Object Model). It could be any HTML element such as a div, span, button, etc.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents an event ID that is used to identify a specific event.
+   * @returns {boolean} a boolean value.
+   */
+  isExist(node, eventId) {
+    if (node) {
+      return (this.cache.has(node) &&
+        this.cache.get(node) !== undefined &&
+        this.cache.get(node).has(eventId));
+    }
+    return false;
+  }
+  /**
+   * The function find if the parent of a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} childNode - Child node.
+   * @param {VegaEventIDInterface} eventId - eventId.
+   * @returns {Nullable<DomNodeSubject>} - Parent node subject.
+   */
+  getSubjectFromParentNodeByEventId(childNode, eventId) {
+    let subject;
+    for (const entry of this.cache) {
+      if (ui.isParent(childNode, entry[0]) && entry[1].has(eventId)) {
+        subject = entry[1].get(eventId);
+        break;
+      }
+    }
+    return subject;
+  }
+  /**
+   * The function `setSubject` creates a new `DomNodeSubject` and associates it with a given `node` and `eventId`, and then returns the created subject.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @returns {DomNodeSubject} dom node subject object
+   */
+  setSubject(node, eventId) {
+    const subjectTitle = `${node.tagName}:${eventId.getName()}`;
+    const subject = new DomNodeSubject(subjectTitle, node);
+    if (!this.cache.get(node)) {
+      this.cache.set(node, new Map());
+    }
+    this.cache.get(node).set(eventId, subject);
+    return subject;
+  }
+}
+const domNodeSubjectFactory = new DomNodeSubjectFactory();
+
+/**
+ * The function `domAcceptableHandle` always returns `true`.
+ *
+ * @returns {boolean} true
+ */
+const domAcceptableHandle = () => {
+  return true;
+};
+/** The `DomNodeSubjectObserverFactory` class provides methods to add and remove observers to HTML element nodes. */
+class DomNodeSubjectObserverFactory {
+  /**
+   * add observer to a given HTML element node
+   *
+   * @param {HTMLElement} node the node ref
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @param {(input?: unknown) => void} callback the callback handle
+   * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
+   */
+  static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
+    if (node) {
+      const domNodesObserver = new observer.Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
+      changeManager.ChangeManager.register(domNodeSubjectFactory.getSubject(node, eventId), domNodesObserver);
+    }
+  }
+  /**
+   * The function removes observers from a given HTML element node.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an `HTMLElement` object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   */
+  static removeUniqueObserverFromNode(node, eventId) {
+    if (domNodeSubjectFactory.isExist(node, eventId)) {
+      changeManager.ChangeManager.clearObserversBySubject(domNodeSubjectFactory.getSubject(node, eventId));
+    }
+  }
+}
+
+exports.DomNodeSubjectObserverFactory = DomNodeSubjectObserverFactory;
+exports.domNodeSubjectFactory = domNodeSubjectFactory;