@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/collection/helpers/validator/test/validator/formFieldController.test.js

@@ -1,9 +1,10 @@
 import { RequiredFieldRule } from '../../rules/requiredFieldRule';
-import '../../../../polyfill/testPolyfill';
+import '../../../../polyfill/test-polyfill/unit/index';
 import { FormFieldController } from '../../formFieldController';
 import changeManager from '../../../change-manager/changeManager';
-import { FORM_FIELD_PENDING_VALID_CHANGE } from '../../../change-manager/subject/static-subject/staticSubjectTitle';
+import { FIELD_ERROR_STATE_CHANGE, FORM_FIELD_PENDING_VALID_CHANGE, } from '../../../change-manager/subject/static-subject/staticSubjectTitle';
 import { Observer } from '../../../change-manager/observer/observer';
+import { MockedMutationObserver } from '../../../../utils/testUtils';
 const stringContainsCaRule = {
   canEvaluate: (input) => {
     return typeof input === 'string';
@@ -16,34 +17,41 @@ const stringContainsCaRule = {
     return !status.disabled && status.visible;
   },
 };
-const defaultOptions = {
-  inputContainerSelector: '.vega-input-container',
-};
 const innerHTML = `
    <div class='test-input-validator-host' value='A'>
 	   <div class='test-input-container'><input/></div>
    </div>
 `;
-test('throw error when inputContainer is invalid', async () => {
+test('should not be notified for FIELD_ERROR_STATE_CHANGE event when inputContainer is invalid', async () => {
   document.body.innerHTML = innerHTML;
   const container = document.querySelector('input');
-  const valid = new FormFieldController([stringContainsCaRule], container, '', defaultOptions);
-  try {
-    await valid.validate(null);
-  }
-  catch (err) {
-    expect(err.message).toEqual("Can't not find inputContainer with selector .vega-input-container");
-  }
+  const valid = new FormFieldController([stringContainsCaRule], container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
+  const mockCanAcceptNotify = jest.fn().mockReturnValue(true);
+  const mockHandleNotify = jest.fn();
+  const fieldPendingValidObserver = new Observer(mockCanAcceptNotify.bind(null), mockHandleNotify);
+  changeManager.register(FIELD_ERROR_STATE_CHANGE, fieldPendingValidObserver);
+  await valid.validate(null);
+  expect(mockHandleNotify).toBeCalledTimes(0);
+  changeManager.unregister(FIELD_ERROR_STATE_CHANGE, fieldPendingValidObserver);
 });
 test('return rules as expect when set default validation rule', () => {
   const container = document.createElement('input');
-  const valid = new FormFieldController(null, container, '', defaultOptions);
+  const valid = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
   valid.setDefaultRules([new RequiredFieldRule()].filter(Boolean));
   expect(valid.getRules().length).toEqual(1);
 });
 test('return rules as expect when add additional validation rule', () => {
   const container = document.createElement('input');
-  const valid = new FormFieldController(null, container, '', defaultOptions);
+  const valid = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
   valid.setDefaultRules([new RequiredFieldRule()].filter(Boolean));
   valid.setAdditionalRules([stringContainsCaRule]);
   expect(valid.getRules().length).toEqual(2);
@@ -51,7 +59,10 @@ test('return rules as expect when add additional validation rule', () => {
 test('should call notify as expect when call the valid method', async () => {
   const container = document.createElement('div');
   container.innerHTML = `<input class='vega-input-container' type='text'>`;
-  const valid = new FormFieldController(null, container, '', defaultOptions, 'input');
+  const valid = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
   valid.setDefaultRules([new RequiredFieldRule()].filter(Boolean));
   const mockCanAcceptNotify = jest.fn().mockReturnValue(true);
   const mockHandleNotify = jest.fn();
@@ -65,7 +76,10 @@ test('should call notify as expect when call the valid method', async () => {
 test('should call notify times as expect when call the async valid method', async () => {
   const container = document.createElement('div');
   container.innerHTML = `<input class='vega-input-container' type='text'>`;
-  const valid = new FormFieldController(null, container, '', defaultOptions, 'input');
+  const valid = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
   valid.setDefaultRules([new RequiredFieldRule()].filter(Boolean));
   const mockCanAcceptNotify = jest.fn().mockReturnValue(true);
   const mockHandleNotify = jest.fn();
@@ -80,7 +94,10 @@ test('should call notify times as expect when call the async valid method', asyn
 test('should call notify times as expect when has async validation rule', async () => {
   const container = document.createElement('div');
   container.innerHTML = `<input class='vega-input-container' type='text'>`;
-  const valid = new FormFieldController(null, container, '', defaultOptions, 'input');
+  const valid = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
   valid.setDefaultRules([new RequiredFieldRule()].filter(Boolean));
   valid.setAdditionalRules([
     {
@@ -108,7 +125,10 @@ test('should call notify times as expect when has async validation rule', async
 test('should get expect result when async validation success', async () => {
   const container = document.createElement('div');
   container.innerHTML = `<input class='vega-input-container' type='text'>`;
-  const valid = new FormFieldController(null, container, '', defaultOptions, 'input');
+  const valid = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
   valid.setDefaultRules([]);
   valid.setAdditionalRules([
     {
@@ -140,3 +160,33 @@ test('should get expect result when async validation success', async () => {
   expect(mockHandleNotify).toHaveBeenCalledWith({ detail: true, host: container });
   changeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
 });
+test('validation should return true when options set undefined and validation set empty', async () => {
+  const container = document.createElement('vega-input');
+  container.componentOnReady = jest.fn().mockResolvedValue(true);
+  const valid = new FormFieldController(null, container, '', undefined);
+  const mockCanAcceptNotify = jest.fn().mockReturnValue(true);
+  const mockHandleNotify = jest.fn();
+  const fieldPendingValidObserver = new Observer(mockCanAcceptNotify.bind(null), mockHandleNotify);
+  changeManager.register(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
+  await valid.validate();
+  expect(mockHandleNotify).toBeCalledTimes(1);
+  expect(mockHandleNotify).toHaveBeenCalledWith({ detail: true, host: container });
+  changeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
+});
+test('monitorTouchedListener should work correct', async () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<div class='vega-input-container'><input class='input1' type='text'></div>`;
+  const controller = new FormFieldController(null, container, '', {
+    inputContainerGetter: () => container.querySelector('.vega-input-container'),
+    touchableAreaGetter: () => Array.from(container.querySelectorAll('input')),
+  });
+  expect(controller['hostChildAddedBlurEventMap'].has(container.querySelector('input'))).toBeFalsy();
+  controller['monitorTouchedListener']();
+  expect(controller['hostChildAddedBlurEventMap'].has(container.querySelector('input'))).toBeTruthy();
+  container.querySelector('.vega-input-container').innerHTML = "<input class='input2' type='text'>";
+  expect(controller['hostChildAddedBlurEventMap'].has(container.querySelector('.input2'))).toBeFalsy();
+  MockedMutationObserver.mock.instances[MockedMutationObserver.mock.instances.length - 1].trigger([
+    { target: container.querySelector('.vega-input-container') },
+  ]);
+  expect(controller['hostChildAddedBlurEventMap'].has(container.querySelector('.input2'))).toBeTruthy();
+});

package/dist/collection/polyfill/test-polyfill/unit/createTouchEvent.js

@@ -0,0 +1,31 @@
+/**
+ * Polyfill new TouchEvent by using createTouchEvent
+ *
+ * @param {element} element target element
+ * @param {touches} touches list include touchX,touchY,touchEventType
+ */
+export function createTouchEvent(element, touches) {
+  for (let i = 0; i < touches.length; i++) {
+    const x = touches[i].touchX;
+    const y = touches[i].touchY;
+    const eventType = touches[i].touchEventType;
+    const touchObj = {
+      identifier: Date.now(),
+      target: element,
+      screenX: x,
+      screenY: y,
+      radiusX: 2.5,
+      radiusY: 2.5,
+      rotationAngle: 10,
+      force: 0.5,
+      clientX: 100,
+      clientY: 150,
+      pageX: 100,
+      pageY: 150,
+    };
+    const touchEvent = new CustomEvent(eventType, { bubbles: true, cancelable: true });
+    touchEvent['touches'] = [touchObj];
+    touchEvent['changedTouches'] = [touchObj];
+    element.dispatchEvent(touchEvent);
+  }
+}

package/dist/collection/polyfill/test-polyfill/unit/events.js

@@ -0,0 +1,100 @@
+import { MockCustomEvent, MockHTMLElement } from '@stencil/core/mock-doc';
+Object.defineProperty(MockHTMLElement.prototype, 'parentElement', {
+  /**
+   * The `get()` method is defining a getter for the `parentElement` property of the `MockHTMLElement`.
+   *
+   * @returns { unknown | null } The element of parent element.
+   */
+  get() {
+    var _a, _b;
+    const slotElement = (_b = (_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot');
+    if (slotElement && slotElement.parentNode) {
+      return slotElement.parentNode['host'] && slotElement.parentNode['host'].shadowRoot
+        ? slotElement.parentNode['host']
+        : slotElement.parentNode;
+    }
+    return this.parentNode || (this.host && this.host.shadowRoot === this ? this.host : null);
+  },
+});
+/** The MockEventListener class represents an event listener with a specified type and handler function. */
+class MockEventListener {
+  /**
+   * The constructor function takes a type and a handler function as parameters.
+   *
+   * @param {string} type - The type parameter is a string that represents the type of event that the
+   * handler will be listening for. It could be something like "click", "keydown", or "submit",
+   * depending on the specific event you want to handle.
+   * @param {(e: unknown) => void} handler - The `handler` parameter is a function that takes an argument of type `unknown` and
+   * returns `void`. It is used to handle events of the specified `type`.
+   */
+  constructor(type, handler) {
+    this.type = type;
+    this.handler = handler;
+  }
+}
+Object.defineProperties(Object.getPrototypeOf(MockHTMLElement).prototype, {
+  addEventListener: {
+    /**
+     * support add capture event when using stencil test
+     *
+     * @param {string} type event type
+     * @param {(e: Event) => void} handler event handle
+     * @param {boolean} [useCapture] use capture mode or not
+     */
+    value: function (type, handler, useCapture) {
+      // eslint-disable @typescript-eslint/naming-convention
+      /**
+       * create new event handle base on the param
+       *
+       * @param {Event} e event object
+       */
+      const cloneHandler = function (e) {
+        if (e && e['__stopImmediate'] !== true) {
+          handler(e);
+        }
+      };
+      cloneHandler['__originHandler'] = handler;
+      if (this['__listeners'] == null) {
+        this['__listeners'] = [];
+      }
+      const eventListener = new MockEventListener(type, cloneHandler);
+      if (useCapture) {
+        this['__listeners'].unshift(eventListener);
+      }
+      else {
+        this['__listeners'].push(eventListener);
+      }
+    },
+  },
+  removeEventListener: {
+    /**
+     * remove the event listener from target element
+     *
+     * @param {string} type event type
+     * @param {(e: Event) => void} handler event handler
+     */
+    value: function (type, handler) {
+      if (this != null && Array.isArray(this['__listeners']) === true) {
+        const elmListener = this['__listeners'].find((e) => {
+          return (e['type'] === type &&
+            (e['handler'] === handler || e['handler']['__originHandler'] === handler));
+        });
+        if (elmListener != null) {
+          const index = this['__listeners'].indexOf(elmListener);
+          this['__listeners'].splice(index, 1);
+        }
+      }
+    },
+  },
+});
+Object.defineProperties(Object.getPrototypeOf(MockCustomEvent).prototype, {
+  stopImmediatePropagation: {
+    /**
+     * add custom property `__stopImmediate` when call the method
+     */
+    value: function () {
+      this.cancelBubble = true;
+      this['__stopImmediate'] = true;
+    },
+  },
+});

package/dist/collection/polyfill/test-polyfill/unit/index.js

@@ -0,0 +1,2 @@
+import './events.ts';
+import './methods.ts';

package/dist/collection/polyfill/test-polyfill/unit/methods.js

@@ -0,0 +1,23 @@
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+/**
+ * Polyfill MockHTMLElement#after method by using MockNode#append
+ *
+ * @param {MockNode} node MockNode passed in
+ */
+MockHTMLElement.prototype['after'] = function (node) {
+  this.parentNode.insertBefore(node, this.nextSibling);
+};
+/**
+ * A polyfill for the replaceChildren method
+ *
+ * @param {MockNode[]} nodes MockNode passed in
+ */
+MockHTMLElement.prototype['replaceChildren'] = function (...nodes) {
+  const childNodes = this.childNodes;
+  childNodes.forEach((node) => {
+    node.remove();
+  });
+  nodes.forEach((node) => {
+    this.appendChild(node);
+  });
+};

package/dist/collection/types/test/typeGuard.test.js

@@ -1,4 +1,4 @@
-import { isResponsiveType, isSpacingDirection } from '../typeGuard';
+import { isResponsiveType, isSpacingDirection, isStateVariantTokenType } from '../typeGuard';
 test('should get expect result when call function isResponsiveType', async () => {
   const sizeWithDefault = {
     default: 'default',
@@ -24,3 +24,10 @@ test('should get expect result when call function isSpacingDirection', async ()
   expect(isSpacingDirection(stringValid1)).toBeTruthy();
   expect(isSpacingDirection(stringValid2)).toBeTruthy();
 });
+test('should get expect result when call function isStateVariantTokenType', async () => {
+  expect(isStateVariantTokenType(undefined)).toBeFalsy();
+  expect(isStateVariantTokenType(null)).toBeFalsy();
+  expect(isStateVariantTokenType({})).toBeTruthy();
+  expect(isStateVariantTokenType({ default: '' })).toBeTruthy();
+  expect(isStateVariantTokenType({ default: '', valid: '' })).toBeFalsy();
+});

package/dist/collection/types/typeGuard.js

@@ -3,9 +3,10 @@ import { Spacing } from '../constants/tokens/spacing';
 import { Shadows } from '../constants/tokens/shadows';
 import { Breakpoints } from '../constants/tokens/breakpoints';
 import { BorderRadius } from '../constants/tokens/borderRadius';
-import { BoxDisplay, FlexAlignItem, FlexDirections, FlexJustifyContent } from '../constants/ui';
+import { BoxDisplay, CssStates, FlexAlignItem, FlexDirections, FlexJustifyContent } from '../constants/ui';
 import { GridColumnRegex, GridRowRegex } from '../constants/regex';
 import { TypographyKeys } from '../constants/publicApi';
+import { Borders } from '../constants/tokens/borders';
 /**
  * Returns true if the input is a string that is one of the four directions.
  *
@@ -37,15 +38,6 @@ export const isDirectionalSpacingType = (input) => {
     Object.keys(input).every(isSpacingDirection) &&
     Object.values(input).every((paddingValue) => paddingValue in Spacing));
 };
-/**
- * `isHTMLVegaSidenavLinkElement` returns `true` if the input is an `HTMLVegaSidenavLinkElement` and `false` otherwise
- *
- * @param {unknown} input - The input to check.
- * @returns {boolean} indicating if the input is type of {@link HTMLVegaSidenavLinkElement}
- */
-export const isHTMLVegaSidenavLinkElement = (input) => {
-  return input instanceof HTMLElement && input['tagName'] === 'VEGA-SIDENAV-LINK';
-};
 /**
  * `isResponsiveType` returns true if the input is an object with a `default` property and all other properties are valid
  * breakpoints
@@ -85,13 +77,22 @@ export const isColorTokenType = (input) => {
   return typeof input === 'string' && Colors.includes(input);
 };
 /**
- * It returns true if the input is a string that starts with 'border-' and is a valid color token type.
+ * It returns true if the input is a string that starts with 'border-color-' and is a valid color token type.
  *
  * @param {unknown} input - The value to be tested.
  * @returns {boolean} indicating if the input is {@link BorderColorsTokenType}
  */
 export const isBorderColorTokenType = (input) => {
-  return isColorTokenType(input) && /^border-.+$/.test(input);
+  return isColorTokenType(input) && /^border-color-.+$/.test(input);
+};
+/**
+ * If the input is a string and it's in the Borders array, then it's a BordersTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that we're checking.
+ * @returns {boolean} indicating if the input is type of {@link BordersTokenType}
+ */
+export const isBorderTokenType = (input) => {
+  return typeof input === 'string' && Borders.includes(input);
 };
 /**
  * It returns true if the input is a string that starts with `bg-` and is a valid color token type.
@@ -275,3 +276,56 @@ export const isNonNullable = (input) => {
 export const isTypographyTokenType = (input) => {
   return typeof input === 'string' && TypographyKeys.includes(input);
 };
+/**
+ * The function `isBorderRadiusDirectionType` checks if the input is a valid `BorderRadiusDirection` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isBorderRadiusDirectionType` function is of
+ * type `unknown`, which means it can be any type of value. The function checks if the input is a
+ * string and if it matches one of the specified values in the array ['top', 'left', 'right
+ * @returns {boolean} The function `isBorderRadiusDirectionType` is returning a boolean value indicating whether
+ * the `input` is of type `BorderRadiusDirection` or not.
+ */
+export const isBorderRadiusDirectionType = (input) => {
+  return (typeof input === 'string' &&
+    ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(input));
+};
+/**
+ * The function `isDirectionalBorderRadiusType` checks if the input object conforms to the
+ * `DirectionalBorderRadiusType` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isDirectionalBorderRadiusType` function is of
+ * type `unknown`, which means it can be any type of value. The function is checking if the input is a
+ * valid `DirectionalBorderRadiusType` by verifying that it is an object, not null,
+ * @returns {boolean} The function `isDirectionalBorderRadiusType` is returning a boolean value.
+ */
+export const isDirectionalBorderRadiusType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isBorderRadiusDirectionType) &&
+    Object.values(input).every((value) => value in BorderRadius));
+};
+/**
+ * The function `isStateVariantTokenType` checks if the input is an object with keys that are all of
+ * type `CssStatesType`.
+ *
+ * @param {unknown} input - The `input` parameter is a value of type `unknown`, which means it can be
+ * any type of value in TypeScript.
+ * @returns {boolean} The `isStateVariantTokenType` function is returning a boolean value. It checks if the
+ * `input` is an object that is not null and if all the keys of the object pass the `isCssStateType`
+ * check. If these conditions are met, it returns `true`, indicating that the `input` is of type
+ * `StateVariantType<T, CssStatesType>`. Otherwise, it
+ */
+export const isStateVariantTokenType = (input) => {
+  return typeof input === 'object' && input !== null && Object.keys(input).every(isCssStateType);
+};
+/**
+ * The function `isCssStateType` checks if the input is a valid CSS state type by verifying if it is a
+ * string and included in a predefined list of CSS states.
+ *
+ * @param {CssStatesType} input - The `input` parameter in the `isCssStateType` function is of type
+ * `CssStatesType`.
+ * @returns {boolean} The function `isCssStateType` is returning a boolean value.
+ */
+export const isCssStateType = (input) => {
+  return typeof input === 'string' && CssStates.includes(input);
+};

package/dist/collection/utils/component.js

@@ -1,4 +1,3 @@
-import { FeatureFlag } from '../helpers/feature-control/featureFlagController';
 import { LogUtility } from './log';
 const exemptionClasses = [
   'vega-flex-grow',
@@ -29,10 +28,8 @@ const exemptionClasses = [
  * @returns {T} processed vega component
  */
 export function sanitizeVegaComponent(renderedOutput, hostElement) {
-  if (FeatureFlag.isEnabled('VEGA_COMPONENT.SANITIZE_VEGA_COMPONENT')) {
-    checkIfInAllowedClassList(renderedOutput, hostElement);
-    checkIfUseDataShrink(hostElement);
-  }
+  checkIfInAllowedClassList(renderedOutput, hostElement);
+  checkIfUseDataShrink(hostElement);
   return renderedOutput;
 }
 /**

package/dist/collection/utils/designToken.js

@@ -4,9 +4,11 @@ import { Spacing } from '../constants/tokens/spacing';
 import { Breakpoints } from '../constants/tokens/breakpoints';
 import { Shadows } from '../constants/tokens/shadows';
 import { LogUtility } from './log';
-import { isBackgroundColorTokenType, isBorderColorTokenType, isBorderRadiusTokenType, isBreakpointsTokenType, isShadowsTokenType, isSpacingTokenType, isTextColorTokenType, isTypographyTokenType, } from '../types/typeGuard';
+import { isBackgroundColorTokenType, isBorderColorTokenType, isBorderRadiusTokenType, isBorderTokenType, isBreakpointsTokenType, isShadowsTokenType, isSpacingTokenType, isTextColorTokenType, isTypographyTokenType, } from '../types/typeGuard';
 import ResponsiveFormatFacade from '../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
 import { TypographyKeys } from '../constants/tokens/typography';
+import { Borders } from '../constants/tokens/borders';
+import StateFormatFacade from '../helpers/formatter/state-formatter/stateFormatFacade';
 /**
  * It logs a warning message to the console.
  *
@@ -54,7 +56,7 @@ export function formatAndValidPadding(token) {
  */
 export function formatAndValidBorderRadius(token) {
   if (isBorderRadiusTokenType(token)) {
-    return `v-rounded-${token}`;
+    return `v-${token}`;
   }
   else {
     logInvalidValueMessage('border-radius', token, Object.keys(BorderRadius));
@@ -71,7 +73,21 @@ export function formatAndValidBorderColor(token) {
     return `v-${token}`;
   }
   else {
-    logInvalidValueMessage('border-color', token, Colors.filter(() => /^border-.+$/.test));
+    logInvalidValueMessage('border-color', token, Colors.filter(() => /^border-color-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid border, return CSS class string of the border. Otherwise, log an error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {string}  return the CSS class string of the border
+ */
+export function formatAndValidBorder(token) {
+  if (isBorderTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('border', token, Borders.filter(() => /^border-.+$/.test));
   }
 }
 /**
@@ -86,7 +102,7 @@ export function formatAndValidBackgroundColor(token, withModes = []) {
     return `v-${token}` + formatTokenWithModes(token, withModes);
   }
   else {
-    logInvalidValueMessage('background-color', token, Colors.filter(() => /^border-.+$/.test));
+    logInvalidValueMessage('background-color', token, Colors.filter(() => /^bg-.+$/.test));
   }
 }
 /**
@@ -102,7 +118,21 @@ export function formatAndValidTextColor(token, withModes = []) {
     return `v-${token}` + formatTokenWithModes(token, withModes);
   }
   else {
-    logInvalidValueMessage('text-color', token, Colors.filter(() => /^border-.+$/.test));
+    logInvalidValueMessage('text-color', token, 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 {string} CSS class string for the flex breakpoint.
+ */
+export function formatAndValidFlexBreakpoint(token) {
+  if (isBreakpointsTokenType(token)) {
+    return `vega-flex-${token}`;
+  }
+  else {
+    logInvalidValueMessage('breakpoint', token, Object.keys(Breakpoints));
   }
 }
 /**
@@ -176,3 +206,17 @@ export function formatAndValidTypographyToken(token) {
     logInvalidValueMessage('font', token, 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`.
+ */
+export function formatAndValidStateToken(token, flag) {
+  if (token !== null && token !== undefined) {
+    return StateFormatFacade.format(token, flag);
+  }
+}

package/dist/collection/utils/test/component.test.js

@@ -1,5 +1,4 @@
 import { VegaFlex } from '../../components/vega-flex/vega-flex';
-import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
 import { isComponentLifecycleMethod, sanitizeVegaComponent } from '../component';
 import { LogUtility } from '../log';
 describe('sanitizeVegaComponent', () => {
@@ -43,36 +42,6 @@ describe('sanitizeVegaComponent', () => {
     expect(node.dataset['shrink']).toEqual('0');
     expect(LogUtility.warn).toHaveBeenCalledWith(`Found attribute [data-shrink='0'] inside component:`, expect.anything(), ` which will be deprecated, please use classes of vega-flex-shrink, vega-flex-grow, vega-flex-shrink-0, vega-flex-grow-0, vega-flex-basis-0 instead.`);
   });
-  it('sanitizeVegaComponent should skip checking external defined class on vega components if flag is turned off', async () => {
-    FeatureFlag.disable('VEGA_COMPONENT.SANITIZE_VEGA_COMPONENT');
-    spyOn(LogUtility, 'warn');
-    const vegaComponent = new VegaFlex();
-    vegaComponent['$attrs$'] = { class: 'verified-class-A verified-class-B' };
-    const hostElement = new HTMLElement();
-    Object.defineProperty(hostElement, 'classList', {
-      value: ['culprit-external-class', 'vega-flex-shrink', 'M:vega-flex-shrink-0'],
-    });
-    sanitizeVegaComponent(vegaComponent, hostElement);
-    expect(hostElement.classList).toEqual([
-      'culprit-external-class',
-      'vega-flex-shrink',
-      'M:vega-flex-shrink-0',
-    ]);
-    expect(LogUtility.warn).toBeCalledTimes(0);
-  });
-  it('sanitizeVegaComponent should skip checking attribute of data-shrink="0" if flag is turned off', async () => {
-    FeatureFlag.disable('VEGA_COMPONENT.SANITIZE_VEGA_COMPONENT');
-    spyOn(LogUtility, 'warn');
-    const vegaComponent = new VegaFlex();
-    vegaComponent['$attrs$'] = { class: 'verified-class-A verified-class-B' };
-    const hostElement = new HTMLElement();
-    const node = new HTMLElement();
-    hostElement.appendChild(node);
-    node.setAttribute('data-shrink', '0');
-    sanitizeVegaComponent(vegaComponent, hostElement);
-    expect(node.dataset['shrink']).toEqual('0');
-    expect(LogUtility.warn).toBeCalledTimes(0);
-  });
 });
 describe('component', () => {
   it('should return as expected when calling isComponentLifecycleMethod', () => {

package/dist/collection/utils/test/designToken.test.js

@@ -1,4 +1,4 @@
-import { formatAndValidBackgroundColor, formatAndValidBorderColor, formatAndValidBorderRadius, formatAndValidBreakpointSize, formatAndValidGap, formatAndValidPadding, formatAndValidShadow, formatAndValidTextColor, formatAndValidTypographyToken, } from '../designToken';
+import { formatAndValidBackgroundColor, formatAndValidBorder, formatAndValidBorderColor, formatAndValidBorderRadius, formatAndValidBreakpointSize, formatAndValidFlexBreakpoint, formatAndValidGap, formatAndValidPadding, formatAndValidShadow, formatAndValidTextColor, formatAndValidTypographyToken, } from '../designToken';
 import { LogUtility } from '../log';
 test('return padding as expected when with spacingTypeToken', () => {
   const result = formatAndValidPadding('size-16');
@@ -20,8 +20,8 @@ test('return as expected when without shadowToken', () => {
 });
 test('return as expected when set borderRadiusToken', () => {
   spyOn(LogUtility, 'warn');
-  formatAndValidBorderRadius('2');
-  expect(formatAndValidBorderRadius('2')).toEqual('v-rounded-2');
+  formatAndValidBorderRadius('rounded-2');
+  expect(formatAndValidBorderRadius('rounded-2')).toEqual('v-rounded-2');
 });
 test('return warn as expected when without BorderRadiusToken', () => {
   spyOn(LogUtility, 'warn');
@@ -75,3 +75,17 @@ test('return warn as expected when with invalid TypographyToken', () => {
   formatAndValidTypographyToken('font-div');
   expect(LogUtility.warn).toBeCalledTimes(1);
 });
+test('return as expected when with valid BorderToken', () => {
+  const result = formatAndValidBorder('border-secondary-btn');
+  expect(result).toEqual('v-border-secondary-btn');
+});
+test('return warn as expected when with invalid BorderToken', () => {
+  spyOn(LogUtility, 'warn');
+  formatAndValidBorder('border-s');
+  expect(LogUtility.warn).toBeCalledTimes(1);
+});
+test('return warn as expected when without FlexBreakpoint', () => {
+  spyOn(LogUtility, 'warn');
+  formatAndValidFlexBreakpoint('small');
+  expect(LogUtility.warn).toBeCalledTimes(1);
+});

package/dist/collection/utils/test/ui.test.js

@@ -1,7 +1,7 @@
 import { DeviceType } from '../../types/ui.type';
 import { LogUtility } from '../log';
 import { setupUserAgent } from '../testUtils';
-import { arrayToClassString, getBrowserVisibleArea, getDeviceType, isParent, containerScrollToItem, isElementVisible, extractNumberFromString, hexToRGB, isTextWrapped, getElementComputedStyle, getHexFromShorthand, findParent, } from '../ui';
+import { arrayToClassString, getBrowserVisibleArea, getDeviceType, isParent, containerScrollToItem, isElementVisible, extractNumberFromString, hexToRGB, isTextWrapped, getElementComputedStyle, getHexFromShorthand, findParent, getDeepActiveElementInShadow, } from '../ui';
 beforeAll(() => {
   document.documentElement.scrollTop = 0;
 });
@@ -221,4 +221,23 @@ describe('isTextWrapped', () => {
     shadowCompShadowRoot.appendChild(span);
     expect(findParent(span, 'div')).toEqual(container);
   });
+  test('getDeepActiveElementInShadow', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <input id='input-out-of-shadow' />
+    <div id='shadow-container'></div>
+    `;
+    document.body.append(container);
+    const shadowContainer = document.querySelector('#shadow-container');
+    document.querySelector('#shadow-container').attachShadow({ mode: 'open' });
+    const innerShadow = document.createElement('div');
+    innerShadow.attachShadow({ mode: 'open' });
+    const innerElement = document.createElement('input');
+    innerShadow.shadowRoot.appendChild(innerElement);
+    shadowContainer.shadowRoot.appendChild(innerShadow);
+    document.querySelector('#input-out-of-shadow').focus();
+    expect(getDeepActiveElementInShadow()).toEqual(document.activeElement);
+    innerElement.focus();
+    expect(getDeepActiveElementInShadow()).not.toEqual(shadowContainer);
+  });
 });