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

package/dist/types/helpers/formatter/responsive-map-formatter/responsiveBorderRadiusFomatter.d.ts

@@ -0,0 +1,27 @@
+import { BreakpointsForPrefixType, CornersType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsiveClassStringFormatter';
+/**
+ * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveBorderRadiusFormatter extends ResponsiveClassStringFormatter<'corners'> {
+  /**
+   * Given a border-radius type, return a string of CSS classes that can be used to apply the border-radius to an element
+   *
+   * @param {CornersType} input - CornersType
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string of CSS classes.
+   */
+  formatToken(input: CornersType, breakpoint?: BreakpointsForPrefixType): string;
+  /**
+   * The function `transformRoundedNoneAndFill` replaces 'rounded-none' with 'rounded-0' and
+   * 'rounded-full' with 'rounded-9999'.
+   *
+   * @param {string} rounded - The `rounded` parameter is a string that represents a CSS class related to the rounding of elements
+   * @returns {string} The transformed value .
+   */
+  private transformRoundedNoneAndFill;
+}
+declare const _default: ResponsiveBorderRadiusFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsiveWidthAndHeightFormatter.d.ts

@@ -0,0 +1,33 @@
+import { HeightType, ResponsiveType, WidthType } from '../../../types/ui.type';
+import { ResponsiveFormatter } from './responsiveFormatter';
+/**
+ * A class for format WidthType and HeightType
+ *
+ * @augments ResponsiveWidthAndHeightFormatter
+ */
+export declare class ResponsiveWidthAndHeightFormatter implements ResponsiveFormatter<WidthType | HeightType, string> {
+  /**
+   * The function takes a responsive type input, determines the current breakpoint, and formats the width
+   * and height based on the breakpoint.
+   *
+   * @param {ResponsiveType<WidthType | HeightType>} input - The `input` parameter in the `format` function is of type `ResponsiveType<WidthType |
+   * HeightType>`. This means that it can accept values that are either of type `WidthType` or
+   * `HeightType` within a responsive context.
+   * @returns {string} The `format` function returns a string value.
+   */
+  format(input: ResponsiveType<WidthType | HeightType>): string;
+  /**
+   * The function `formatWidthAndHeight` takes an input of type `WidthType` or `HeightType` and returns a
+   * string representation with 'px' appended if the input is a number or a string that can be converted
+   * to a number, otherwise it returns the input as is.
+   *
+   * @param {WidthType | HeightType} input - The `input` parameter in the `formatWidthAndHeight` function
+   * can be either a `number`, a `string` that can be converted to a number, or a key from the `Spacing`
+   * object.
+   * @returns {string} The `formatWidthAndHeight` function takes an input of type `WidthType` or `HeightType` and
+   * returns a string.
+   */
+  formatWidthAndHeight(input: WidthType | HeightType): string;
+}
+declare const _default: ResponsiveWidthAndHeightFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/stateBackgroundColorFormatter.d.ts

@@ -0,0 +1,32 @@
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { BackgroundColorsTokenType } from '../../../types/designToken.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateBackgroundColorFormatter` class in TypeScript formats background color tokens
+ * and handles different CSS states.
+ */
+declare class StateBackgroundColorFormatter extends StateVariantFormatter<'backgroundColor'> {
+  private readonly states;
+  /**
+   * The function `formatToken` takes a `BackgroundColorsTokenType` input, checks if it is a valid
+   * background color token type, and returns the corresponding CSS background color value or logs a
+   * warning if the input is invalid.
+   *
+   * @param {BackgroundColorsTokenType} input - The `input` parameter is of type
+   * `BackgroundColorsTokenType`, which is used to represent different background color tokens.
+   * @returns {string} The `formatToken` function takes a `BackgroundColorsTokenType` input and checks if it is a
+   * valid background color token type. If it is valid, it retrieves the corresponding color value from
+   * the `BackgroundColorMap` and returns a CSS style string with the background color. If the input is
+   * not valid, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input: BackgroundColorsTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of objects of type CssStatesType, which represents the states stored in the
+   * variable this.states.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateBackgroundColorFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/stateBorderColorFormatter.d.ts

@@ -0,0 +1,31 @@
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { BorderColorsTokenType } from '../../../types/designToken.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateBorderColorFormatter` class in TypeScript formats border color tokens based on
+ * input values and provides an array of CSS states.
+ */
+declare class StateBorderColorFormatter extends StateVariantFormatter<'borderColor'> {
+  private readonly states;
+  /**
+   * The function `formatToken` takes a BorderColorsTokenType input, checks if it is a valid border
+   * color token type, and returns the corresponding CSS border-color value or logs a warning if the
+   * input is invalid.
+   *
+   * @param {BorderColorsTokenType} input - BorderColorsTokenType
+   * @returns {string} The `formatToken` function returns a string that represents a CSS style for border color
+   * based on the input `BorderColorsTokenType`. If the input is a valid border color token type, it
+   * retrieves the corresponding value from the `BorderColorMap` and returns a CSS style string with the
+   * border color value. If the input is not a valid border color token type, it logs a warning message
+   * and returns an
+   */
+  formatToken(input: BorderColorsTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of CssStatesType objects is being returned.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateBorderColorFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/stateBorderFormatter.d.ts

@@ -0,0 +1,33 @@
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { BordersTokenType } from '../../../types/designToken.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateBorderFormatter` class in TypeScript formats border token values into CSS border properties
+ * and provides state information.
+ */
+declare class StateBorderFormatter extends StateVariantFormatter<'border'> {
+  private readonly states;
+  /**
+   * The `formatToken` function in TypeScript formats a border token value into a CSS border property
+   * string or logs a warning if the input is invalid.
+   *
+   * @param {BordersTokenType} input - The `formatToken` function takes a `BordersTokenType` as input
+   * and returns a formatted string representing a CSS border property based on the input token value.
+   * If the input is a valid border token type, it retrieves the corresponding CSS value from the
+   * `BorderMap` and returns it in a `border
+   * @returns {string} The `formatToken` function returns a string that represents a CSS border property based on
+   * the input `BordersTokenType`. If the input is a valid border token type, it retrieves the
+   * corresponding value from the `BorderMap` and returns a CSS `border` property string. If the input
+   * is not a valid border token type, it logs a warning message using `LogUtility.warn` and returns an
+   * empty
+   */
+  formatToken(input: BordersTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[] } An array of objects of type CssStatesType, which represents the states.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateBorderFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/stateFormatFacade.d.ts

@@ -0,0 +1,27 @@
+import { CssStatesType, StateVariantType, ManagedStateScopeInput } from '../../../types/ui.type';
+/**
+ * The `StateFormatFacade` class in TypeScript provides a method to format different types of
+ * state variants based on a specified flag.
+ */
+declare class StateFormatFacade {
+  /**
+   * The function `format` takes in an input and a flag, then formats the input based on the flag
+   * provided.
+   *
+   * @param {StateVariantType} input - The `input` parameter in the `format` function is of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that it expects an input value
+   * that corresponds to the specified flag and state. The `Flag` type is a key of
+   * `ManagedStateScopeInput
+   * @param {keyof ManagedStateScopeInput} flag - The `flag` parameter in the `format` function is a key of the
+   * `ManagedStateScopeInput` type. It is used to determine which formatting logic to apply based on the
+   * specific flag provided. The function then switches on the flag value to select the appropriate
+   * formatting logic for that particular flag.
+   * @returns {string} The `format` function takes in an input of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>` and a flag of type `Flag`. It then switches
+   * on the flag value and returns a formatted string based on the flag value. The return value depends
+   * on the flag value:
+   */
+  format<Flag extends keyof ManagedStateScopeInput, State extends CssStatesType>(input: StateVariantType<ManagedStateScopeInput[Flag], State>, flag: Flag): string;
+}
+declare const _default: StateFormatFacade;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/stateFormatter.d.ts

@@ -0,0 +1,3 @@
+export interface StateFormatter<T, K> {
+	format(input: StateVariantType<T>): K;
+}

package/dist/types/helpers/formatter/state-formatter/stateShadowFormatter.d.ts

@@ -0,0 +1,28 @@
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { ShadowsTokenType } from '../../../types/designToken.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateShadowFormatter` class in TypeScript formats a CSS `box-shadow` property based on a
+ * ShadowsTokenType input and provides an array of CssStatesType objects.
+ */
+declare class StateShadowFormatter extends StateVariantFormatter<'shadow'> {
+  private readonly states;
+  /**
+   * The `formatToken` function in TypeScript takes a ShadowsTokenType input, validates it, and returns a
+   * formatted CSS box-shadow property string or logs a warning if the input is invalid.
+   *
+   * @param {ShadowsTokenType} input - ShadowsTokenType
+   * @returns {string} The `formatToken` function takes a `ShadowsTokenType` input and returns a CSS `box-shadow`
+   * property with the corresponding value from the `ShadowMap` object. If the input is not a valid
+   * `ShadowsTokenType`, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input: ShadowsTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]}An array of CssStatesType objects is being returned.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateShadowFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/stateVariantFormatter.d.ts

@@ -0,0 +1,23 @@
+import { CssStatesType, ManagedStateScopeInput, StateVariantType } from '../../../types/ui.type';
+import { StateFormatter } from './stateFormatter';
+/**
+ * StateVariantFormatter: Format state token to CSS styles
+ */
+export declare abstract class StateVariantFormatter<Flag extends keyof ManagedStateScopeInput> implements StateFormatter<ManagedStateScopeInput[Flag], string> {
+  /**
+   * The function `format` takes an input state variant type and returns formatted CSS styles based on
+   * the input.
+   *
+   * @param {StateVariantType} input - The `format` function takes an `input` parameter of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that the `input` parameter
+   * should be an object that contains styles for different states, where the keys are state names and
+   * the values are the corresponding styles
+   * @returns {string} The `format` function returns a string that contains CSS styles based on the input
+   * provided. If the input is determined to be a state variant token type, the function generates CSS
+   * styles for each state in the input and returns them joined by newlines. If the input is not a state
+   * variant token type, the function generates CSS styles for the default state and returns them.
+   */
+  format<State extends CssStatesType>(input: StateVariantType<ManagedStateScopeInput[Flag], State>): string;
+  abstract formatToken(input: ManagedStateScopeInput[Flag]): string;
+  abstract getStates(): CssStatesType[];
+}

package/dist/types/helpers/formatter/test/responsive-map-formatter/responsiveBorderRadiusFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatter/test/responsive-map-formatter/responsiveWidthAndHeightFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatter/test/state-formatter/stateBackgroundColorFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatter/test/state-formatter/stateBorderColorFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatter/test/state-formatter/stateBorderFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatter/test/state-formatter/stateFormatFacade.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatter/test/state-formatter/stateShadowFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/keyboard/keyboardManager.d.ts

@@ -55,12 +55,6 @@ declare class KeyboardManager {
    * @returns {boolean} - should invoke
    */
   private shouldInvokeListener;
-  /**
-   * If shadowRoot exists, it returns the activeElement in the shadowRoot. Otherwise, it returns the activeElement in the current scope.
-   *
-   *  @returns {HTMLElement} - The active element in the current scope.
-   */
-  private getActiveElement;
 }
 declare const _default: KeyboardManager;
 export default _default;

package/dist/types/helpers/slimmers/elementAppenderSlimmer.d.ts

@@ -10,6 +10,7 @@ declare type ShowConfigFactoryType = () => ElementAppenderShowConfig;
  */
 declare type TriggerType = 'click' | 'hover' | 'none' | 'custom';
 declare type GetTriggerType = () => TriggerType;
+declare type DisableInteractiveGetter = () => boolean;
 export declare class ElementAppenderSlimmer extends VegaSlimmer {
   private static readonly DELAY_HIDE_TIME;
   private showConfigFactory;
@@ -18,10 +19,14 @@ export declare class ElementAppenderSlimmer extends VegaSlimmer {
   private showConfig;
   private delayHideTimer;
   private elementAppender;
+  /**
+   * appendableElement is interactive by default (to pass [WCAG 2.1 success criterion 1.4.13](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus))
+   */
+  private disableInteractiveGetter;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
-  constructor(showConfigFactory: ShowConfigFactoryType, getTrigger: GetTriggerType, isDropdownShowName?: string);
+  constructor(showConfigFactory: ShowConfigFactoryType, getTrigger: GetTriggerType, isDropdownShowName?: string, disableInteractiveGetter?: DisableInteractiveGetter);
   getElementAppender(): Nullable<ElementAppender>;
   show(): void;
   hide(): void;

package/dist/types/helpers/slimmers/fieldErrorUiControllerSlimmer.d.ts

@@ -4,31 +4,29 @@ export declare class FieldErrorUIControllerSlimmer extends VegaSlimmer {
   private host;
   private options;
   /**
-   * It takes an error message and displays it in the error container
+   * It takes an error message and displays it in the error container.
+   * TODO: Each component displays the error message and puts it in the code of the respective component.
+   * The ticket is https://gethired.atlassian.net/browse/VD-2508
    *
    * @param {string} errorMessage - The error message to display.
    */
   applyInputInvalidUI(errorMessage: string): void;
   /**
    * Reset the input element's invalid UI
+   * TODO: Each component hides the error message and puts it in the code of the respective component.
+   * The ticket is https://gethired.atlassian.net/browse/VD-2508
    */
   resetInputInvalidUI(): void;
-  /**
-   * Get the input element container by selector
-   *
-   * @deprecated The method will be delete
-   * @returns {HTMLElement} The input element container.
-   */
-  private getInputElementContainerBySelector;
   /**
    * Get the input element container
    *
-   * @returns {HTMLElement} The input element container.
+   * @returns {Nullable<HTMLElement>} The input element container.
    */
   private getInputElementContainer;
   /**
    * Get the error container, if it doesn't exist, create it
    *
+   * @param {HTMLElement} inputContainer - The input element container.
    * @returns {HTMLElement} The error container.
    */
   private getErrorContainer;

package/dist/types/helpers/slimmers/formFieldControllerSlimmer.d.ts

@@ -1,18 +1,16 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 import { VegaSlimmer } from '../../vega-slimmer/vega-slimmer-core';
 import { FormFieldValidationRule } from '../validator/rules/formFieldValidationRule';
-import { FormFieldDefaultValueType } from '../validator/formFieldController';
+import { FormFieldController, FormFieldDefaultValueType } from '../validator/formFieldController';
 import { Nullable } from '../../types/general';
 import { FieldErrorControllerSlimmer } from './fieldErrorControllerSilmmer';
+import { FormFieldValidInvokeSlimmer } from './formFieldValidInvokeSlimmer';
 export declare type FormFieldOptionForSlimmer<T> = {
   propertyRules: PropertyRuleTypeForSlimmer<T>[];
   validationRulesName?: string;
-  inputContainerSelector?: string;
-  touchableAreaSelector?: string;
   defaultValue: FormFieldDefaultValueType<T> | null;
   attributeGetter: (propertyName: string) => unknown;
-  inputContainerGetter?: () => HTMLElement;
-  touchableAreaGetter?: () => HTMLElement[];
+  inputContainerGetter: () => Nullable<HTMLElement>;
+  touchableAreaGetter: () => HTMLElement[];
 };
 declare type RuleFactory<T> = (propValue: unknown, ...dependence: unknown[]) => FormFieldValidationRule<T> | null;
 export declare type PropertyRuleTypeForSlimmer<T> = {
@@ -32,11 +30,11 @@ export declare class FormFieldControllerSlimmer<T> extends VegaSlimmer {
   disabled: boolean;
   autoValidation: boolean;
   isValid: Nullable<boolean>;
-  vegaValidate: EventEmitter<Nullable<boolean>>;
   fieldErrorSlimmer: FieldErrorControllerSlimmer;
+  formFieldValidInvokeSlimmer: FormFieldValidInvokeSlimmer;
   options: FormFieldOptionForSlimmer<T>;
+  validator: Nullable<FormFieldController<T>>;
   private formFieldAttributesObserver;
-  private validator;
   /**
    * The constructor function initializes a FormFieldOptionForSlimmer object with the provided options.
    *
@@ -58,13 +56,6 @@ export declare class FormFieldControllerSlimmer<T> extends VegaSlimmer {
    * some components has not a prop validationRules
    */
   watchValidationRulesByFormControllerSlimmer(): void;
-  /**
-   * call the method when the component call valid method
-   *
-   * @param {boolean | 'rule'} showError show error message or not
-   * @returns {Promise<boolean>} the validation result
-   */
-  validByFormControllerSlimmer(showError?: boolean | 'rule'): Promise<boolean> | undefined;
   /**
    * listen the attributes change when connectedCallback method call
    */

package/dist/types/helpers/slimmers/formFieldValidInvokeSlimmer.d.ts

@@ -0,0 +1,22 @@
+import { VegaSlimmer } from '../../vega-slimmer/vega-slimmer-core';
+import { Nullable } from '../../types/general';
+import { FormFieldController } from '../validator/formFieldController';
+/** The FormFieldValidInvokeSlimmer class extends VegaSlimmer and handles validation calls for form elements. */
+export declare class FormFieldValidInvokeSlimmer extends VegaSlimmer {
+  host: HTMLElement;
+  validator: Nullable<FormFieldController<unknown>>;
+  /**
+   * register the observer when the slimmer method called
+   */
+  registerValidInvocationObserver(): void;
+  /**
+   * unregister the observer when the slimmer method called
+   */
+  handleUnregisterObserver(): void;
+  /**
+   * call the component validate method, complete the promise and notify the parent form update the isValid property
+   *
+   * @param {CallValidPayloadType} payload The element, valid parameter and a promise resolve handle
+   */
+  private handleValidInvocation;
+}

package/dist/types/helpers/slimmers/test/elementAppenderSlimmer.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/slimmers/test/fieldErrorControllerSlimmer.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/slimmers/test/formFieldControllerSlimmer.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/slimmers/test/formFieldValidInvokeSlimmer.test.d.ts

@@ -0,0 +1 @@
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/slimmers/test/keyboardManagerSlimmer.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/slimmers/test/pageResizeObserverSlimmer.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/theme/theme.d.ts

@@ -12,7 +12,7 @@ export type VegaThemeOverrideColors = {
 	sidebarColor?: string;
 };
 
-type OverrideColor = {
+export type OverrideColor = {
 	name: string;
 	value: Nullable<string>;
 };

package/dist/types/helpers/validator/formFieldController.d.ts

@@ -21,7 +21,6 @@ export declare type InputValidatorListener = {
  * @property {FormFieldValidationRule<number | string | boolean>[] = []} defaultRules default rules used for validation
  * @property {FormFieldValidationRule<number | string | boolean>[]} additionalRules additional rules used for validation
  * @property {InputValidatorListener[]} listeners listeners monitoring on the validation result
- * @property {string} inputContainerSelector container that holds the input value
  * @property {unknown & { value?: number | string | boolean }} hostElement host element used to get the value for validation if input element is not present
  * @property {boolean} isTouched true if an element is touched
  * @property {boolean} isModified true if an element is modified
@@ -42,23 +41,23 @@ export declare class FormFieldController<T> implements Validator<T> {
   private isTouched;
   private isModified;
   private isVisible;
-  private touchableArea;
   private disabledAttrObserver;
   private formResetTriggeredObserver;
   private defaultValue;
   private formFieldValidationRuleHandlerChain;
   private hostValueChangeObserver;
+  private hostChildrenObserver;
+  private hostChildAddedBlurEventMap;
   /**
    * This function is called when the component is created, and it sets up the observers that will be used to detect changes to the component's state.
-   * The first thing the constructor does is set the defaultRules, hostElement, inputContainerSelector, touchableArea, isTouched, isModified, and isDisabled properties
+   * The first thing the constructor does is set the defaultRules, hostElement, touchableArea, isTouched, isModified, and isDisabled properties
    *
    * @param {FormFieldValidationRule<number | string | boolean>[]} defaultRules - FormFieldValidationRule<T>[]
    * @param {FormFieldElement<number | string | boolean>} hostElement - The form field element that this validation manager is attached to.
    * @param {FormFieldDefaultValueType}  defaultValue - This is defualt value for value property of component.
    * @param {FormFieldOptionForSlimmer} options - The selector for the element that contains the input element.
-   * @param {string} [touchableArea=input] - This is the element that will be used to determine if the user has touched the field.
    */
-  constructor(defaultRules: FormFieldValidationRule<T>[], hostElement: FormFieldElement<T>, defaultValue: FormFieldDefaultValueType<T> | null, options: Partial<FormFieldOptionForSlimmer<T>>, touchableArea?: string);
+  constructor(defaultRules: FormFieldValidationRule<T>[], hostElement: FormFieldElement<T>, defaultValue: FormFieldDefaultValueType<T> | null, options: Partial<FormFieldOptionForSlimmer<T>>);
   /**
    * It validates the input against the rules and returns a boolean indicating whether the input is valid or not
    *
@@ -158,6 +157,10 @@ export declare class FormFieldController<T> implements Validator<T> {
    * Unregister the form reset observer.
    */
   private unregisterFormResetObserver;
+  /**
+   * monitor the host component touchable area elements update
+   */
+  private monitorTouchedListener;
   /**
    * It adds a blur event listener to all elements that match the selector in the touchableArea property
    */
@@ -168,6 +171,12 @@ export declare class FormFieldController<T> implements Validator<T> {
    * @returns {HTMLElement[]} an array of HTMLElements.
    */
   private getTouchableAreaElements;
+  /**
+   * Get the input container element based on the options provided.
+   *
+   * @returns {HTMLElement} the form field element input container element
+   */
+  private getInputContainerElements;
   /**
    * It adds an event listener to the host element that listens for a custom event called `vegaChange`.
    * When that event is fired, the `updateIsModified` function is called with the argument `true`

package/dist/types/helpers/validator/test/validator/formFieldController.test.d.ts

@@ -1 +1 @@
-import '../../../../polyfill/testPolyfill';
+import '../../../../polyfill/test-polyfill/unit/index';

package/dist/types/polyfill/test-polyfill/unit/events.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/polyfill/test-polyfill/unit/index.d.ts

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

package/dist/types/polyfill/test-polyfill/unit/methods.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/types/components.type.d.ts

@@ -6,6 +6,8 @@
  */
 export {
 	BoxDisplayType,
+	CornersType,
+	CssStatesType,
 	ElementAppenderAlignmentType,
 	ElementAppenderPlacementType,
 	FlexAlignItemType,
@@ -14,6 +16,7 @@ export {
 	GapType,
 	GridColumnType,
 	GridRowType,
+	HeightType,
 	MarginType,
 	MaxHeightType,
 	PaddingType,
@@ -21,8 +24,10 @@ export {
 	PositionAlignmentType,
 	ResponsiveType,
 	SizeType,
+	StateVariantType,
 	TranslocationType,
 	VegaComponentInterface,
+	WidthType,
 } from '../types/ui.type';
 export { LinkTargetType, VegaAppFooterLink } from '../components/vega-app-footer/types';
 export {
@@ -30,14 +35,17 @@ export {
 	VegaAppHeaderButtonDropdownConfig,
 	VegaAppHeaderButtonSize,
 } from '../components/vega-app-header-button/types';
+export { VegaBarChartOptionsType } from '../components/vega-chart/vega-bar-chart/types';
 export {
 	BackgroundColorsTokenType,
+	BorderColorsTokenType,
+	BordersTokenType,
+	BreakpointsTokenType,
+	ShadowsTokenType,
 	SpacingTokenType,
 	TextColorsTokenType,
 	TypographyTokenType,
 } from '../types/designToken.type';
-export { VegaBadgeSize } from '../components/vega-badge/types';
-export { VegaBarChartOptionsType } from '../components/vega-chart/vega-bar-chart/types';
 export {
 	VegaBreadcrumbCollapsedThresholdType,
 	VegaBreadcrumbItemType,
@@ -48,7 +56,11 @@ export {
 	VegaButtonType,
 	VegaButtonVariant,
 } from '../components/vega-button/types';
-export { VegaButtonCircleSize, VegaButtonCircleVariant } from '../components/vega-button-circle/types';
+export {
+	VegaButtonCircleSize,
+	VegaButtonCircleTooltip,
+	VegaButtonCircleVariant,
+} from '../components/vega-button-circle/types';
 export { VegaFlexProps } from '../components/vega-checkbox/types';
 export {
 	VegaChipIconAlign,
@@ -96,11 +108,6 @@ export {
 export { VegaPaginationItemType } from '../components/vega-pagination/types';
 export { PieChartOptions } from '../helpers/chart/pieChart';
 export { VegaFlexProps as VegaFlexProps1 } from '../components/vega-radio/types';
-export {
-	OpenByDefaultType,
-	SidebarHeaderConfig,
-	SidebarTopLevelItem,
-} from '../components/vega-sidenav/types';
 export { TabConfig, TabGroupVariant } from '../components/vega-tab-group/types';
 export {
 	VegaTableChangePropType,
@@ -118,6 +125,7 @@ export {
 	VegaTableSelectAllProp,
 	VegaTableSorterConfig,
 } from '../components/vega-table/interface';
+export { VegaTextTooltipProps } from '../components/vega-text/types';
 export { TimePickerModeType, TimePickerValueType } from '../components/vega-time-picker/types';
 export { FormFieldValidationRule as FormFieldValidationRule1 } from '../types/publicApi';
 export { SourceItemType } from '../components/vega-virtual-scroll/types';

package/dist/types/types/designToken.type.d.ts

@@ -6,12 +6,14 @@ import { Rings } from '../constants/tokens/rings';
 import { Shadows } from '../constants/tokens/shadows';
 import { Spacing } from '../constants/tokens/spacing';
 import { TypographyKeys } from '../constants/tokens/typography';
+import { Borders } from '../constants/tokens/borders';
 export declare type BorderRadiusTokenType = keyof typeof BorderRadius;
 export declare type BreakpointsTokenType = keyof typeof Breakpoints | 'default';
 export declare type ColorsTokenType = typeof Colors[number];
 export declare type TextColorsTokenType = typeof TextColors[number];
 export declare type BackgroundColorsTokenType = typeof BackgroundColors[number];
 export declare type BorderColorsTokenType = typeof BorderColors[number];
+export declare type BordersTokenType = typeof Borders[number];
 export declare type IconsTokenType = typeof Icons[number] | `fas ${string}`;
 export declare type RingsTokenType = typeof Rings[number];
 export declare type ShadowsTokenType = typeof Shadows[number];

package/dist/types/types/publicApi.d.ts

@@ -9,3 +9,7 @@ export { MaskConfig } from '../helpers/formatter/string-formatter/stringMaskStra
 export { LeftNavSection, LeftNavGroup, LeftNavLink } from '../components/vega-nav/interface';
 export { LineChartOptionsType as VegaLineChartOptionsType } from '../helpers/chart/lineChart';
 export { EventSemanticsConfig, EventSemantics } from '../helpers/event-manager/internalVegaEventManager';
+export { VegaComponentName, VegaNativeEventNameType } from './ui.type';
+export { VegaLoaderOptions, VegaLoaderIndicatorOptions } from '../helpers/loading-indicator/vegaLoader';
+export { VegaNotifyOption } from '../helpers/notify/vegaNotify';
+export { OverrideColor } from '../helpers/theme/theme';