@heartlandone/vega 2.0.0-temp-test-0.2 → 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 '../../../observer/changeManager';
-import { FORM_FIELD_PENDING_VALID_CHANGE } from '../../../observer/subject';
-import { Observer } from '../../../observer/observer';
+import changeManager from '../../../change-manager/changeManager';
+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/index.js

@@ -1,3 +1,4 @@
+export * from './components';
 export * from './utils/publicApi';
 export * from './constants/publicApi';
 export * from './helpers/publicApi';

package/dist/collection/polyfill/{testPolyfill.js → test-polyfill/unit/createTouchEvent.js}

@@ -1,26 +1,3 @@
-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);
-  });
-};
 /**
  * Polyfill new TouchEvent by using createTouchEvent
  *

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/publicApi.js

@@ -1 +1 @@
-export {};
+export * from './components.type';

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',
@@ -12,7 +11,6 @@ const exemptionClasses = [
   'v-text-black',
   'v-text-white',
   'v-hidden',
-  'vega-loader-container-relative',
   'vega-page-notification-fade-out',
   'v-h-full',
   'v-h-screen',
@@ -30,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;
 }
 /**
@@ -109,3 +105,27 @@ const componentLifecycleMethods = [
 export const isComponentLifecycleMethod = (methodName) => {
   return componentLifecycleMethods.includes(methodName);
 };
+/* istanbul ignore next */
+/**
+ * The function `getActiveElement` returns the active element within a shadow root or the
+ * document.
+ *
+ * @param {Document | ShadowRoot} root - The `root` parameter is the root element from which to start
+ * searching for the active element. It can be either a `Document` or a `ShadowRoot`. If no `root` is
+ * provided, it defaults to the `document` object.
+ * @returns {Nullable<Element>} The function `getActiveElementInShadow` returns an `Element` if there is an active element
+ * in the given `root` (either a `Document` or a `ShadowRoot`). If there is no active element, it
+ * returns `null`.
+ */
+export const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+  if (activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  else if (activeEl) {
+    return activeEl;
+  }
+  else {
+    return null;
+  }
+};

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,7 @@ 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));
   }
 }
 /**
@@ -190,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/publicApi.js

@@ -1,4 +1,4 @@
 export { getCurrentBreakpoint } from './breakpoints';
 export { LogUtility } from './log';
-export { formatAndValidResponsiveToken, formatAndValidGap, formatAndValidShadow, formatAndValidBreakpointSize, formatAndValidBackgroundColor, formatAndValidBorderColor, formatAndValidBorderRadius, formatAndValidFlexBreakpoint, formatAndValidPadding, formatAndValidTextColor, } from './designToken';
+export { formatAndValidResponsiveToken, formatAndValidGap, formatAndValidShadow, formatAndValidBreakpointSize, formatAndValidBackgroundColor, formatAndValidBorderColor, formatAndValidBorderRadius, formatAndValidPadding, formatAndValidTextColor, } from './designToken';
 export { camelToDashCase } from './string';

package/dist/collection/utils/specUtils.js

@@ -0,0 +1,19 @@
+/**
+ * NOTE: This method is only for **SPEC** test cases.
+ *
+ * @typedef T HTMLElement
+ * @param {HTMLElement | ShadowRoot} host - The start root to find
+ * @param {selector} selector - The CSS selector path.
+ * @returns {T} - Return the found element
+ */
+export const find = (host, selector) => {
+  const selectorParts = selector.split('>>>').map((item) => item.trim());
+  const rootSelector = selectorParts[0];
+  const nestedSelectors = selectorParts.slice(1);
+  let element = host.querySelector(rootSelector);
+  nestedSelectors.forEach((item) => {
+    var _a;
+    element = (_a = element === null || element === void 0 ? void 0 : element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(item);
+  });
+  return element;
+};

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', () => {