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

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/icon/iconManager.d.ts

@@ -0,0 +1,33 @@
+import { Nullable } from '../../types/general';
+export declare type IconPayload = {
+  icon: string;
+  autoSize?: boolean;
+};
+/**
+ * Internal icon manager controller.
+ */
+declare class IconManager {
+  private icons;
+  /**
+   * Registers the icons into the map.
+   *
+   * @param {Record<string, string>} icons - icon records
+   */
+  register(icons: Record<string, IconPayload>): void;
+  /**
+   * Get an internal icon by name
+   *
+   * @param {string} name - The name of the icon
+   * @returns {Nullable<string>} returns the icon svg or null if not found
+   */
+  getIcon(name: string): Nullable<IconPayload>;
+  /**
+   *  Check if the icon manager has an icon by name
+   *
+   * @param {string} name - The name of the icon
+   * @returns {boolean} returns true if the icon exists
+   */
+  hasIcon(name: string): boolean;
+}
+export declare const VegaIconManager: IconManager;
+export {};

package/dist/types/helpers/icon/test/iconManagerController.test.d.ts

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

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

@@ -1,8 +1,11 @@
 import VegaEnvManager, { FrameworkEnum } from './vega-telemetry-helper/vegaEnvManager';
+import VegaEventManager from '../helpers/event-manager/vegaEventManager';
 export { FeatureFlag } from './feature-control/featureFlagController';
 export { VegaLoader } from './loading-indicator/vegaLoaderController';
 export { VegaNotify } from './notify/vegaNotifyController';
 export { VegaThemeManager } from './theme/themeManager';
 export { setVegaLogLevel } from '../utils/log';
 export { VegaDialog } from './dialog/vegaDialogController';
-export { VegaEnvManager, FrameworkEnum };
+export { VegaEnvManager, FrameworkEnum, VegaEventManager };
+export { BaseStrategy as VegaJQueryDelegatedEventStrategy } from './event-manager/event-delegated/baseStrategy';
+export { VegaIconManager } from './icon/iconManager';

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

@@ -0,0 +1,33 @@
+import { VegaSlimmer } from '../../vega-slimmer/vega-slimmer-core';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+/**
+ * Component global style slimmer
+ */
+export declare class ComponentGlobalStyleSlimmer<T extends HTMLStencilElement> extends VegaSlimmer {
+  private static connectedComponents;
+  host: T;
+  private id;
+  private readonly style;
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  connectedCallback(): void;
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback(): void;
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad(): void;
+  /**
+   * The constructor of the slimmer
+   *
+   * @param {string} styles - The style string that will be appended to the document head.
+   */
+  constructor(styles: string);
+  /**
+   * @returns {Nullable<HTMLStyleElement>} - The style element
+   */
+  private getStyleElement;
+}

package/dist/types/helpers/slimmers/element-appender-container/defaultWrapper.d.ts

@@ -0,0 +1,20 @@
+import { ElementAppenderShowConfig } from '../../ui/elementAppender';
+import { ElementAppenderContainerRetriever } from './elementAppenderContainerController';
+/**
+ * This class is is used to retrieve the body element of document.
+ */
+export declare class DefaultWrapper implements ElementAppenderContainerRetriever {
+  showConfig: ElementAppenderShowConfig;
+  /**
+   * The canRetrieve function return is always true.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve: () => boolean;
+  /**
+   * The retrieve function get the body element of document.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve: () => HTMLElement;
+}

package/dist/types/helpers/slimmers/element-appender-container/elementAppenderContainerController.d.ts

@@ -0,0 +1,33 @@
+import { VegaSlimmer } from '../../../vega-slimmer/vega-slimmer-core';
+import { ElementAppenderShowConfig } from '../../ui/elementAppender';
+import { DefaultWrapper } from './defaultWrapper';
+import { PositionRelativeToWrapper } from './positionRelativeToWrapper';
+import { VegaModalWrapper } from './vegaModalWrapper';
+import { VegaPopoverWrapper } from './vegaPopoverWrapper';
+export interface ElementAppenderContainerRetriever {
+  canRetrieve: () => boolean;
+  retrieve: () => HTMLElement;
+}
+/**
+ * This class is responsible for setting the container element for appending an element based on certain conditions.
+ *
+ * @property {HTMLElement} container the container
+ * @property {HTMLElement} showConfig the show config
+ */
+export declare class ElementAppenderContainerController extends VegaSlimmer {
+  container: HTMLElement;
+  showConfig: ElementAppenderShowConfig;
+  protected readonly positionRelativeToWrapper: PositionRelativeToWrapper;
+  protected readonly vegaPopoverWrapper: VegaPopoverWrapper;
+  protected readonly vegaModalWrapper: VegaModalWrapper;
+  protected readonly defaultWrapper: DefaultWrapper;
+  private containerRetrievers;
+  /**
+   * The function sets the container element by iterating through a list of retrievers, defaulting to the document body.
+   */
+  setContainer(): void;
+  /**
+   * The function sets up an array of container retrievers based on certain conditions.
+   */
+  private setContainerRetrievers;
+}

package/dist/types/helpers/slimmers/element-appender-container/positionRelativeToWrapper.d.ts

@@ -0,0 +1,22 @@
+import { ElementAppenderShowConfig } from '../../ui/elementAppender';
+import { ElementAppenderContainerRetriever } from './elementAppenderContainerController';
+/**
+ * This class is is used to retrieve an HTML element based on a specified selector.
+ *
+ * @property {HTMLElement} showConfig the show config
+ */
+export declare class PositionRelativeToWrapper implements ElementAppenderContainerRetriever {
+  showConfig: ElementAppenderShowConfig;
+  /**
+   * The canRetrieve function just determines whether the showConfig contains the positionRelativeTo object.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve: () => boolean;
+  /**
+   * The retrieve function query the element of positionRelativeTo in showConfig.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve: () => HTMLElement;
+}

package/dist/types/helpers/slimmers/element-appender-container/vegaModalWrapper.d.ts

@@ -0,0 +1,35 @@
+import { ElementAppenderShowConfig } from '../../ui/elementAppender';
+import { ElementAppenderContainerRetriever } from './elementAppenderContainerController';
+/**
+ * This class is is used to get vega-modal element as a container and store the element appender element to slot.
+ *
+ * @property {HTMLElement} showConfig the show config
+ */
+export declare class VegaModalWrapper implements ElementAppenderContainerRetriever {
+  showConfig: ElementAppenderShowConfig;
+  /**
+   * The canRetrieve function just determines whether the target of showConfig has the `vega-modal` element. If not, search upwards layer by layer.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve: () => boolean;
+  /**
+   * The retrieve function get the slot position of vega-modal element.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve: () => HTMLElement;
+  /**
+   * This function `getVegaModalContentWithoutScroll` determines whether vega-modal has a slot whose name is `content` or `modal-content`. If there is a component rendered in the modal, the elementAppender added to the corresponding slot attribute is added. If not, the elementAppender is not directly appended to the root directory of vega-modal.
+   *
+   * @param {Nullable<HTMLElement>} parentModal The parentModal is vega-modal element.
+   * @param {Nullable<HTMLElement>} element The parentModal is vega-modal element.
+   */
+  private setElementSlot;
+  /**
+   * The function "getShowConfigContainer" returns the appended element container. If the modal content can be scrolled, the container is the div element that wraps the append element. Otherwise, the container is the modal dialog itself.
+   *
+   * @returns {HTMLElement} the `scrollContainer` element.
+   */
+  private getVegaModalShowConfigContainer;
+}

package/dist/types/helpers/slimmers/element-appender-container/vegaPopoverWrapper.d.ts

@@ -0,0 +1,22 @@
+import { ElementAppenderShowConfig } from '../../ui/elementAppender';
+import { ElementAppenderContainerRetriever } from './elementAppenderContainerController';
+/**
+ * This class is used to get the class `vega-popover` as a container and store the element appender element.
+ *
+ * @property {HTMLElement} showConfig the show config
+ */
+export declare class VegaPopoverWrapper implements ElementAppenderContainerRetriever {
+  showConfig: ElementAppenderShowConfig;
+  /**
+   * The canRetrieve function just determine whether the target of showConfig has the class `vega-popover`. If not, search upwards layer by layer.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve: () => boolean;
+  /**
+   * The retrieve function get the element that if the target of showConfig does not have the class vega-popover, search upwards layer by layer until this element is found.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve: () => HTMLElement;
+}

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,24 +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
    *
-   * @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,16 +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: () => Nullable<HTMLElement>;
+  touchableAreaGetter: () => HTMLElement[];
 };
 declare type RuleFactory<T> = (propValue: unknown, ...dependence: unknown[]) => FormFieldValidationRule<T> | null;
 export declare type PropertyRuleTypeForSlimmer<T> = {
@@ -30,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.
    *
@@ -56,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/global/vegaWatchMethodCancelSlimmer.d.ts

@@ -0,0 +1,39 @@
+import { GlobalSlimmerConfig, VegaSlimmer } from '../../../vega-slimmer/vega-slimmer-core';
+/**
+ * The `VegaWatchMethodCancelSlimmer` class is a TypeScript class that removes
+ * the body of watch methods when a component is not fully instantiated and
+ * applies the original method body when the component is fully instantiated.
+ */
+export declare class VegaWatchMethodCancelSlimmer extends VegaSlimmer {
+  private component;
+  private originalWatchers;
+  /**
+   * while component reattached, the component will call `connectedCallback` but not call `componentDidLoad`,
+   * so we add this flag to skip empty the watch function in this case.
+   */
+  private hasDisconnected;
+  private isEnabled;
+  /**
+   * The connectedCallback function removes the body of watch methods when the component is not fully
+   * instantiated.
+   */
+  connectedCallback(): void;
+  /**
+   * The `@MapToComponentMethod('disconnectedCallback')` decorator is used to map the `disconnectedCallback` method
+   * to the corresponding method in the Stencil component.
+   */
+  disconnectedCallback(): void;
+  /**
+   * The `componentDidLoad` function applies the original method body to the component's watchers when
+   * the component is fully instantiated.
+   */
+  componentDidLoad(): void;
+  /**
+   * The constructor function takes a component object as a parameter and assigns it to the "component"
+   * property of the class.
+   *
+   * @param {GlobalSlimmerConfig} option - The `option` parameter is of type `GlobalSlimmerConfig`.
+   * It is an object that represents a component in a software system.
+   */
+  constructor(option: GlobalSlimmerConfig);
+}

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

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

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

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