@globalpayments/vega 2.40.0 → 2.42.0

package/dist/collection/helpers/notify/vega-notify-controller.js

@@ -39,7 +39,7 @@ class VegaNotifyController {
    * It creates a new notification element, adds it to the container, and returns the notification's ID
    *
    * @param {VegaNotifyOption} options - VegaNotifyProps
-   * @returns {string} The ID of the notification.
+   * @returns {Promise<string>} The ID of the notification.
    * @vegaVersion 1.17.0
    */
   async open(options) {
@@ -79,7 +79,7 @@ class VegaNotifyController {
    * It creates a new page notification element, sets its properties, and returns it
    *
    * @param {VegaNotifyOption} props - VegaNotifyProps - the properties of the notification
-   * @returns {HTMLElement} A function that takes in a props object and returns a pageNotification element.
+   * @returns {HTMLVegaPageNotificationElement} A function that takes in a props object and returns a pageNotification element.
    */
   createPageNotification(props) {
     const pageNotification = document.createElement('vega-page-notification');
@@ -94,7 +94,7 @@ class VegaNotifyController {
    * It creates a div element, sets its z-index to be on top of everything else, adds a class to it, and
    * then adds it to the body of the page
    *
-   * @returns {HTMLElement} The container is being returned.
+   * @returns {HTMLVegaPageNotificationListElement} The container is being returned.
    */
   getContainer() {
     if (this.container) {

package/dist/collection/helpers/remote-invocation/remote-invocation-registry.js

@@ -8,9 +8,10 @@ export class RemoteInvocationRegistry {
   /**
    * This function performs a remote invocation call and returning the result.
    *
+   * @typedef T generic type
    * @param {HTMLElement} subject the dom node subject
    * @param {unknown[]} args - The `args` parameter of specific method.
-   * @returns {unknown} The result of call `remoteInvocation`.
+   * @returns {Nullable<T>} The result of call `remoteInvocation`.
    */
   call(subject, ...args) {
     let result = null;

package/dist/collection/helpers/skeleton-loader/vega-skeleton-loader-controller.js

@@ -74,7 +74,7 @@ class VegaSkeletonLoaderController {
    * Create a skeleton item. The skeleton animated always be true
    *
    * @param {VegaSkeletonLoaderItem} config - Configuration for the skeleton item.
-   * @returns {HTMLElement} - Skeleton item.
+   * @returns {HTMLVegaSkeletonElement} - Skeleton item.
    */
   createSkeleton(config) {
     const { type, width, height } = config;
@@ -87,7 +87,7 @@ class VegaSkeletonLoaderController {
    *
    * @param {HTMLElement[]} skeletons - Skeleton elements of the loader.
    * @param {VegaSkeletonLoaderLayout} layout - Flex properties for the layout.
-   * @returns {HTMLElement} - Container wrapping the skeletons in the specified flex layout.
+   * @returns {HTMLVegaFlexElement} - Container wrapping the skeletons in the specified flex layout.
    */
   wrapLayout(skeletons, layout) {
     const skeletonContainer = document.createElement('vega-flex');

package/dist/collection/helpers/slimmers/deprecated-property-slimmer.js

@@ -13,7 +13,8 @@ export class DeprecatedPropertySlimmerBase extends VegaSlimmer {
    * The `getValue` function returns either the old property or the new property based on a deep equality
    * check.
    *
-   * @returns {unknown} The `getValue` method returns either the `oldProperty` or `newProperty` based on the result
+   * @typedef T generic type
+   * @returns {T} The `getValue` method returns either the `oldProperty` or `newProperty` based on the result
    * of the `deepEqual` comparison between them. If `newProperty` is deeply equal to `oldProperty`, then
    * `oldProperty` is returned; otherwise, `newProperty` is returned.
    */
@@ -26,11 +27,12 @@ export class DeprecatedPropertySlimmerBase extends VegaSlimmer {
 /**
  * Create dynamic deprecated property slimmer
  *
+ * @typedef K generic type
  * @param {ClassPrototype} mapFromClass - It represents the class that you want to map from.
  * @param {string} newPropertyName - The new prop name or name path
  * @param {string} oldPropertyName - The old prop name or name path
  * @param {unknown} defaultValue - The default value of the prop
- * @returns {DeprecatedPropertySlimmerBase<unknown>} - deprecated property slimmer
+ * @returns {DeprecatedPropertySlimmerBase<K>} - deprecated property slimmer
  */
 export function createDeprecatedPropertySlimmer(mapFromClass, newPropertyName, oldPropertyName, defaultValue) {
   return createDynamicSlimmer(mapFromClass, DeprecatedPropertySlimmerBase, [{ mapFrom: 'host', mapTo: 'host' }], [], [

package/dist/collection/helpers/slimmers/{element-appender-container → element-appender}/element-appender-container-controller.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { InjectVegaSlimmer, MapToComponentField as MapToSlimmerField, VegaSlimmer } from 'vega-slimmer/core';
-import { DefaultWrapper } from './default-wrapper';
+import { DefaultWrapper } from './body-positioned-wrapper/default-wrapper';
 import { PositionRelativeToWrapper } from './body-positioned-wrapper/position-relative-to-wrapper';
 import { VegaModalWrapper } from './body-positioned-wrapper/vega-modal-wrapper';
 import { VegaPopoverWrapper } from './body-positioned-wrapper/vega-popover-wrapper';

package/dist/collection/helpers/slimmers/{element-appender-slimmer.js → element-appender/element-appender-slimmer.js}

@@ -5,11 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { ElementAppender } from '../ui/element-appender';
-import { findParent, isParent } from '../../utils/ui';
-import ChangeManager from '../change-manager/change-manager';
-import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../change-manager/subject/static-subject/static-subject-title';
-import { Observer } from '../change-manager/observer/observer';
+import { ElementAppender } from '../../ui/element-appender';
+import { findParent, isParent } from '../../../utils/ui';
+import ChangeManager from '../../change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../change-manager/subject/static-subject/static-subject-title';
+import { Observer } from '../../change-manager/observer/observer';
 export class ElementAppenderSlimmer extends VegaSlimmer {
   constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow', disableInteractiveGetter = () => false) {
     super();
@@ -85,7 +85,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       if (this.shouldListenerWork('custom') &&
         this.isShowing() &&
         this.showConfig &&
-        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !findParent(currentTarget, '.vega-element-appender-appendable') &&
         !isParent(currentTarget, this.showConfig.target) &&
         findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();

package/dist/collection/helpers/slimmers/{test → element-appender/test}/element-appender-slimmer.test.js

@@ -5,13 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
-import { triggerMouseEvent } from '../../../utils/spec-utils';
-import '../../../polyfill/test-polyfill/unit/index';
+import { triggerMouseEvent } from '../../../../utils/spec-utils';
+import '../../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../element-appender-slimmer';
-import { LogUtility } from '../../../utils/log';
-import ChangeManager from '../../change-manager/change-manager';
-import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../change-manager/subject/static-subject/static-subject-title';
+import { LogUtility } from '../../../../utils/log';
+import ChangeManager from '../../../change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../change-manager/subject/static-subject/static-subject-title';
 describe('ElementAppender slimmer test suite', () => {
   const mockedComponentDidLoadMethod = jest.fn();
   const mockedComponentDisconnectedCallbackMethod = jest.fn();

package/dist/collection/helpers/slimmers/field-error-ui-controller-slimmer.js

@@ -78,7 +78,7 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
    * Get the error container, if it doesn't exist, create it
    *
    * @param {HTMLElement} inputContainer - The input element container.
-   * @returns {HTMLElement} The error container.
+   * @returns {HTMLElement | undefined} The error container.
    */
   getErrorContainer(inputContainer) {
     for (const strategy of this.fieldErrorUiControllerStrategies) {

package/dist/collection/helpers/slimmers/form-field-controller-slimmer.js

@@ -130,7 +130,8 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
    * It takes the property rules from the option, maps them to a function that returns a validation rule,
    * and then filters out any falsy values
    *
-   * @returns {FormFieldValidationRule[]} An array of validation rules.
+   * @typedef T generic type
+   * @returns {FormFieldValidationRule<T>[]} An array of validation rules.
    */
   getPropertyRules() {
     const { propertyRules, attributeGetter } = this.options;

package/dist/collection/helpers/slimmers/mutation-observer/mutation-observer-filters.js

@@ -7,7 +7,7 @@ import { findNodeList } from '../../../utils/array';
  * a string representing the tag name of an HTML element. The function then returns a `MutationFilter`
  * function that filters mutations based on whether any added or removed nodes have the specified tag
  * name.
- * @returns {Function} The `TagNameMutationFilter` function is being returned. It takes a `tagName` parameter of
+ * @returns {MutationFilter} The `TagNameMutationFilter` function is being returned. It takes a `tagName` parameter of
  * type string and returns a `MutationFilter` function that filters mutations based on whether any
  * added or removed nodes have a tag name matching the provided `tagName`.
  */
@@ -28,7 +28,7 @@ export const TagNameMutationFilter = (...tagNames) => {
  * The function `AttributeOldValueMutationFilter` filters mutations based on whether the old attribute
  * value differs from the current attribute value on the host element.
  *
- * @returns { Function }The code snippet defines a function named `AttributeOldValueMutationFilter` that returns a
+ * @returns { MutationFilter }The code snippet defines a function named `AttributeOldValueMutationFilter` that returns a
  * `MutationFilter` function. The `MutationFilter` function takes an array of `MutationRecord` objects
  * and an `HTMLElement` as parameters.
  */
@@ -41,7 +41,7 @@ export const AttributeOldValueMutationFilter = () => {
  * Filters mutations based on specified tag names or attribute changes.
  *
  * @param {string[]} tagNames - The tagName of need listened child.
- * @returns {Function} - Filter function.
+ * @returns {MutationFilter} - Filter function.
  */
 export const TagNameAndAttributeMutationFilter = (...tagNames) => {
   return (mutations) => {

package/dist/collection/helpers/slimmers/position-calculation/base-position-calculation-strategy.js

@@ -336,7 +336,7 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
   /**
    * Retrieves and formats the translocation.
    *
-   * @returns {TranslocationType} current translocation.
+   * @returns {Nullable<TranslocationType>} current translocation.
    */
   getTranslocation() {
     const translocation = this.showConfig.translocation;

package/dist/collection/helpers/slimmers/position-calculation/test/body-position-calculation-strategy.test.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { InjectVegaSlimmer } from 'vega-slimmer/core';
 import { LogUtility } from '../../../../utils/log';
 import { PositionCalculationController } from '../position-calculation-controller';
-import { ElementAppenderContainerController } from '../../element-appender-container/element-appender-container-controller';
+import { ElementAppenderContainerController } from '../../element-appender/element-appender-container-controller';
 export class PositionCalculationMockedComponent {
   constructor() {
     this.elementAppenderContainerController = new ElementAppenderContainerController();

package/dist/collection/helpers/slimmers/runtime-metrics/public-api-runtime-metrics-slimmer-base.js

@@ -48,7 +48,7 @@ export class VegaPublicAPIRuntimeMetricsSlimmerBase extends VegaSlimmer {
    * The `CurrentlyInvokedMethodName` is a public API method name, it comes from the `InjectVegaTelemetrySlimmer` definition and assignment
    *
    * @param {unknown[]} [args] - The `args` parameter passed in when the slimmer method is executed
-   * @returns {Record<string, unknown>} The `getPublicAPIMetricsPayload` method returns an object with the following
+   * @returns {Nullable<Record<string, unknown>>} The `getPublicAPIMetricsPayload` method returns an object with the following
    * structure:
    * {
    * 	publicAPIName: string, // The public api name

package/dist/collection/helpers/theme/controllers/color-schema-overriding-controller.js

@@ -64,7 +64,7 @@ class ColorSchemaOverridingController {
    *
    * @param {OverridableToken} overrideColorToken The token will be overridden
    * @param {VegaThemeOverrideColors} overrideColors the payload of override colors
-   * @returns {string} The css var value
+   * @returns {Nullable<string>} The css var value
    */
   parseCssVarValue(overrideColorToken, overrideColors) {
     var _a;

package/dist/collection/helpers/touch-helper/touch-listener.js

@@ -44,7 +44,7 @@ export class TouchListener {
    * @param {number} startY - The y-coordinate of the touch start event.
    * @param {number} endX - The x coordinate of the touch end event.
    * @param {number} endY - the y coordinate of the touch event.
-   * @returns {{ direction: TouchDirection; distance: number }} The direction and distance of the touch.
+   * @returns {TouchDirectionAndDistanceType} The direction and distance of the touch.
    */
   static getTouchDirectionAndDistance(startX, startY, endX, endY) {
     const delX = endX - startX;
@@ -66,7 +66,7 @@ export class TouchListener {
    * Get the coordinates of a touch event
    *
    * @param {TouchEvent} event - The event object that was passed to the handler.
-   * @returns {{ x: number; y: number }} The coordinates of the touch event.
+   * @returns {TouchEventCoordinatesType} The coordinates of the touch event.
    */
   static getTouchEventCoordinates(event) {
     return { x: event.changedTouches[0].screenX, y: event.changedTouches[0].screenY };

package/dist/collection/helpers/translation/locales/en.js

@@ -23,6 +23,7 @@ export const staticTranslations = {
   'Show': 'Show',
   'Go To': 'Go To',
   'Viewing {0}-{1} of {2}': 'Viewing {0}-{1} of {2}',
+  'Items Per Page': 'Items Per Page',
   'Upload': 'Upload',
   'Clear': 'Clear',
   'Today': 'Today',

package/dist/collection/helpers/translation/tests/internal-translation-controller.test.js

@@ -113,6 +113,7 @@ describe('VegaTranslationController', () => {
       'Show': 'Show',
       'Go To': 'Go To',
       'Viewing {0}-{1} of {2}': 'Viewing {0}-{1} of {2}',
+      'Items Per Page': 'Items Per Page',
       'Upload': 'Upload',
       'Clear': 'Clear',
       'Today': 'Today',

package/dist/collection/helpers/ui/element-appender.js

@@ -9,7 +9,7 @@ import InternalVegaZIndexManager from '../zindex/internal-vega-z-index-manager';
 import { LogUtility } from '../../utils/log';
 import { InjectVegaSlimmer, createDynamicSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer';
-import { ElementAppenderContainerController } from '../slimmers/element-appender-container/element-appender-container-controller';
+import { ElementAppenderContainerController } from '../slimmers/element-appender/element-appender-container-controller';
 import { PositionCalculationController } from '../slimmers/position-calculation/position-calculation-controller';
 /**
  * This class is responsible for attaching the appendable element to the host element and adjusting its position
@@ -212,6 +212,7 @@ export class ElementAppender {
     if (!this.showConfig.isScreenPosition) {
       this.initVisibleAppendElement();
     }
+    this.showConfig.appendableElement.classList.add('vega-element-appender-appendable');
     this.showConfig.appendableElement.style.boxSizing = 'border-box';
     this.positionCalculationController.setCalculationStrategy();
   }

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -23,7 +23,7 @@ test('return result as expect when call show', () => {
   drop1.show();
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-bottom vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-bottom vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div>
 	`);
   drop1.hide();
   spyOn(target, 'getBoundingClientRect').and.returnValue({
@@ -42,7 +42,7 @@ test('return result as expect when call show', () => {
   drop2.show();
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-top vega-alignment-start" style=" box-sizing: border-box; left: 20px; top: 100px; width: 200px; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style=" box-sizing: border-box; left: 20px; top: 100px; width: 200px; z-index: 10001;"></div>
 	`);
   drop2.hide();
   const drop3 = new ElementAppender({
@@ -105,7 +105,7 @@ test('return result as expect when call hide', () => {
   drop.hide();
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-bottom vega-alignment-start vega-force-hidden" style="box-sizing: border-box; left: 0px; top: 0px;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-bottom vega-alignment-start vega-force-hidden" style="box-sizing: border-box; left: 0px; top: 0px;"></div>
 	`);
 });
 test('should not change css position in body when is not static', () => {
@@ -165,7 +165,7 @@ test('content should append to body while not in modal', () => {
   drop.show();
   expect(document.body).toEqualHtml(`
 	<vega-input-select></vega-input-select>
-	<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div
+	<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div
 	`);
   drop.hide();
 });
@@ -191,7 +191,7 @@ test('content should append to modal while in modal', () => {
 	  <div class="modal-dialog"></div>
 	</mock:shadow-root>
 	<vega-input-select slot="content"></vega-input-select>
-	<div class="dropdown vega-alignment-start vega-placement-top" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
   </vega-modal>`);
   drop.hide();
 });
@@ -212,7 +212,7 @@ test('content append proper while positionRelativeTo set', () => {
   expect(document.body).toEqualHtml(`
 	<div id="container">
 		<vega-input-select></vega-input-select>
-		<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+		<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
 	</div>
 	`);
   drop.hide();
@@ -243,7 +243,7 @@ test('content should append to modal content while in scroll modal content', ()
 	  </div>
 	</mock:shadow-root>
 	<vega-input-select></vega-input-select>
-	<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
   </vega-modal>`);
   drop.hide();
 });
@@ -266,7 +266,7 @@ test('content should append to popover content while in scroll modal content', (
 	<vega-modal>
 		<vega-popover class="vega-popover">
 			<vega-input-select></vega-input-select>
-			<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
 		</vega-popover>
 	</vega-modal>
 	`);
@@ -355,7 +355,7 @@ test('return result as expect when max/min width set', () => {
   element.style.removeProperty('z-index');
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; min-width: 100px; max-width: 300px; left: 0px; top: 0px;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; min-width: 100px; max-width: 300px; left: 0px; top: 0px;"></div>
 	`);
   drop.hide();
 });
@@ -449,7 +449,7 @@ describe('screen position', () => {
     });
     drop1.show();
     expect(element).toEqualHtml(`
-			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
 		`);
     drop1['previousTargetRect'] = {
       left: 10,
@@ -457,7 +457,7 @@ describe('screen position', () => {
     };
     drop1.onScroll();
     expect(element).toEqualHtml(`
-			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
 		`);
     drop1['previousTargetRect'] = {
       left: 100,
@@ -473,7 +473,7 @@ describe('screen position', () => {
     drop1['previousTargetRect'] = undefined;
     drop1.onScroll();
     expect(element).toEqualHtml(`
-			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
 		`);
   });
 });

package/dist/collection/helpers/validator/form-field-controller.js

@@ -150,7 +150,8 @@ export class FormFieldController {
   /**
    * It returns an array of all the validation rules for the field
    *
-   * @returns {FormFieldValidationRule<number | string | boolean>[]} An array of FormFieldValidationRule<T>
+   * @typedef T generic type
+   * @returns {FormFieldValidationRule<T>[]} An array of FormFieldValidationRule<T>
    */
   getRules() {
     const additionalRules = [...this.additionalRules];
@@ -319,7 +320,7 @@ export class FormFieldController {
   /**
    * Get the input container element based on the options provided.
    *
-   * @returns {HTMLElement} the form field element input container element
+   * @returns {Nullable<HTMLElement>} the form field element input container element
    */
   getInputContainerElements() {
     return this.options && this.options.inputContainerGetter ? this.options.inputContainerGetter() : null;
@@ -451,9 +452,10 @@ export class FormFieldController {
    * If it does, it returns that additional rule, and the rule will be removed from the additional rules array.
    * otherwise, it returns the default rule.
    *
+   * @typedef T generic type
    * @param {InternalFormFieldValidationRule} defaultRule - The rule to be overridden.
    * @param {FormFieldValidationRule[]} additionalRules - The additional rules to be applied.
-   * @returns {FormFieldValidationRule} The overridden rule.
+   * @returns {FormFieldValidationRule<T>} The overridden rule.
    */
   overrideDefaultRuleByAdditionalRule(defaultRule, additionalRules) {
     if (defaultRule && additionalRules) {

package/dist/collection/polyfill/shadow-selection/shadow-selection-polyfill.js

@@ -68,7 +68,7 @@ export class ShadowSelectionPolyfill {
    * For browser which supported shadowroot.getSelection, we use shadowRoot.getselection().
    *
    * @param {ShadowRoot} shadow - A shadow.
-   * @returns {Selection} - The shadow selection.
+   * @returns {Nullable<Selection>} - The shadow selection.
    */
   getSelection(shadow) {
     if (this.supportShadowSelection) {

package/dist/collection/utils/api.js

@@ -5,9 +5,10 @@ export class ApiUtil {
   /**
    * It returns a promise that resolves to a JSON object of type T
    *
+   * @typedef T generic type
    * @param {string} url - The url to make the request to.
    * @param {HeadersInit} headers - HeadersInit
-   * @returns {Promise}A promise of type T
+   * @returns {Promise<T>}A promise of type T
    */
   static async get(url, headers) {
     return await ApiUtil.getResponseInJSON(url, 'GET', headers, undefined);
@@ -16,10 +17,11 @@ export class ApiUtil {
    * It takes a URL, a method, some headers, and some data, and returns a promise that resolves to the
    * response in JSON format
    *
+   * @typedef T generic type
    * @param {string} url - The URL to make the request to.
    * @param {unknown} data - The data to send to the server.
    * @param {HeadersInit} headers - HeadersInit
-   * @returns {Promise} A promise that resolves to the response in JSON format.
+   * @returns {Promise<T>} A promise that resolves to the response in JSON format.
    */
   static async post(url, data, headers) {
     return await ApiUtil.getResponseInJSON(url, 'POST', headers, JSON.stringify(data));
@@ -28,12 +30,13 @@ export class ApiUtil {
    * It takes a URL, a method, a set of headers, and an optional body, and returns a promise that
    * resolves to a JSON object
    *
+   * @typedef T generic type
    * @param {string} url - The URL to send the request to.
    * @param {string} method - The HTTP method to use.
    * @param {HeadersInit} headers - HeadersInit - This is the headers that will be sent with the
    * request.
    * @param {string} [body] - The body of the request.
-   * @returns {Promise} A promise that resolves to a JSON object.
+   * @returns {Promise<T>} A promise that resolves to a JSON object.
    */
   static async getResponseInJSON(url, method, headers, body) {
     if (headers) {

package/dist/collection/utils/array.js

@@ -75,7 +75,7 @@ export function getLongestTextLengthFromArray(textArray) {
  * revertArrayFromFlatArray([1,2,3,4,5,6],[])
  * @param {T[]} flatArr - an array of elements that have been flattened into a single array.
  * @param {T[]} lengthArr - `lengthArr` is an array of numbers that specifies the length of each sub-array that the `flatArr`
- * @returns {T[]|T[][]} The function `revertArrayFromFlatArray` returns either a single-dimensional array of type `T[]` or a two-dimensional array of type `T[][]`
+ * @returns {T[] | T[][]} The function `revertArrayFromFlatArray` returns either a single-dimensional array of type `T[]` or a two-dimensional array of type `T[][]`
  */
 export function convertArrayToNestedArray(flatArr, lengthArr) {
   if (lengthArr.length) {
@@ -133,7 +133,7 @@ export function sortArrayOrNestedArray(data, sortBy) {
  * @param {string[]} [existArray] - The `existArray` parameter is an optional array of strings that
  * represents the desired order of the elements in the `needSortArray`. If provided, the function will
  * sort the elements in `needSortArray` based on their position in `existArray`. If not provided, the default exist array will use the default order of the array
- * @returns {unknown[] | unknown[][]} The function `sortAsExistArray` returns a sorted array or nested array of type `T[] |
+ * @returns {T[] | T[][]} The function `sortAsExistArray` returns a sorted array or nested array of type `T[] |
  * T[][]`. The sorting is based on the order of elements in the `existArray` parameter, or if
  * `existArray` is not provided, it is based on the order of appearance of elements in the input array
  * or nested array. The sorting is done using the `sortArrayOrNested

package/dist/collection/utils/breakpoints.js

@@ -32,8 +32,9 @@ export const getCurrentBreakpoint = () => {
  *   XL: 'size-24',
  * }
  *
+ * @typedef T generic type
  * @param {ResponsiveType<ResponsiveScope>} breakpoints - responsive token
- * @returns {ResponsiveType<ResponsiveScope>} - completed breakpointss
+ * @returns {ResponsiveType<T>} - completed breakpointss
  */
 export const createCompleteResponsiveMap = (breakpoints) => {
   let responsiveScope;

package/dist/collection/utils/design-token.js

@@ -38,7 +38,7 @@ function formatTokenWithModes(token, modes) {
  * 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 {string} The the CSS class string of the padding token.
+ * @returns {Nullable<string>} The the CSS class string of the padding token.
  */
 export function formatAndValidPadding(token) {
   if (isSpacingTokenType(token)) {
@@ -53,7 +53,7 @@ export function formatAndValidPadding(token) {
  * 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 {string} The function `formatAndValidBorderStyle` returns a string that is formatted as
+ * @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`).
@@ -71,7 +71,7 @@ export function formatAndValidBorderStyle(token) {
  * error message
  *
  * @param {unknown} token - The value passed in by the user.
- * @returns {string} The the CSS class string of the border radius token.
+ * @returns {Nullable<string>} The the CSS class string of the border radius token.
  */
 export function formatAndValidBorderRadius(token) {
   if (isBorderRadiusTokenType(token)) {
@@ -85,7 +85,7 @@ export function formatAndValidBorderRadius(token) {
  * 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 {string}  return the CSS class string of the border color
+ * @returns {Nullable<string>}  return the CSS class string of the border color
  */
 export function formatAndValidBorderColor(token) {
   if (isBorderColorTokenType(token)) {
@@ -99,7 +99,7 @@ export function formatAndValidBorderColor(token) {
  * 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
+ * @returns {Nullable<string>}  return the CSS class string of the border
  */
 export function formatAndValidBorder(token) {
   if (isBorderTokenType(token)) {
@@ -114,7 +114,7 @@ export function formatAndValidBorder(token) {
  *
  * @param {unknown} token - The value of the token.
  * @param {TokenMode[]} withModes - TokenMode[] = []
- * @returns {string} CSS class string for the background color token with modes supported.
+ * @returns {Nullable<string>} CSS class string for the background color token with modes supported.
  */
 export function formatAndValidBackgroundColor(token, withModes = []) {
   if (isBackgroundColorTokenType(token)) {
@@ -130,7 +130,7 @@ export function formatAndValidBackgroundColor(token, withModes = []) {
  *
  * @param {unknown} token - The token to format.
  * @param {TokenMode[]} withModes - TokenMode[] = []
- * @returns {string} A CSS class string that is either a valid color or a valid color with modes.
+ * @returns {Nullable<string>} A CSS class string that is either a valid color or a valid color with modes.
  */
 export function formatAndValidTextColor(token, withModes = []) {
   if (isTextColorTokenType(token)) {
@@ -144,7 +144,7 @@ export function formatAndValidTextColor(token, withModes = []) {
  * 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.
+ * @returns {Nullable<string>} CSS class string for the flex breakpoint.
  */
 export function formatAndValidFlexBreakpoint(token) {
   if (isBreakpointsTokenType(token)) {
@@ -158,7 +158,7 @@ export function formatAndValidFlexBreakpoint(token) {
  * 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 {number} value of the breakpoint.
+ * @returns {Nullable<number>} value of the breakpoint.
  */
 export function formatAndValidBreakpointSize(token) {
   if (isBreakpointsTokenType(token)) {
@@ -173,7 +173,7 @@ export function formatAndValidBreakpointSize(token) {
  * error message
  *
  * @param {unknown} token - The value passed in by the user.
- * @returns {string} CSS class string for the given gap token.
+ * @returns {Nullable<string>} CSS class string for the given gap token.
  */
 export function formatAndValidGap(token) {
   if (isSpacingTokenType(token)) {
@@ -188,7 +188,7 @@ export function formatAndValidGap(token) {
  *
  * @param {string} token - The token to format.
  * @param {TokenMode[]} withModes - TokenMode[] = []
- * @returns {string} CSS class string of the shadow token with modes supported
+ * @returns {Nullable<string>} CSS class string of the shadow token with modes supported
  */
 export function formatAndValidShadow(token, withModes = []) {
   if (isShadowsTokenType(token)) {
@@ -204,7 +204,7 @@ export function formatAndValidShadow(token, withModes = []) {
  * @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<string>} A nullable string
+ * @returns {Nullable<ManagedResponsiveScopeOutput[Flag]>} A nullable string
  */
 export function formatAndValidResponsiveToken(token, flag) {
   if (token !== null && token !== undefined) {
@@ -215,7 +215,7 @@ export function formatAndValidResponsiveToken(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.
+ * @returns {Nullable<string>} a string value.
  */
 export function formatAndValidTypographyToken(token) {
   if (isTypographyTokenType(token)) {

package/dist/collection/utils/local-storage.js

@@ -12,8 +12,9 @@ export function setItem(key, value) {
 /**
  * If the browser supports localStorage, return the value of the key, otherwise return null.
  *
+ * @typedef T generic type
  * @param {string} key - The key of the item you want to get.
- * @returns {string} A string
+ * @returns {T | null} A any type
  */
 export function getItem(key) {
   var _a;