@globalpayments/vega 2.73.0 → 2.76.0

package/dist/types/components/vega-input/slimmers/renderers/vega-input-renderer.d.ts

@@ -10,7 +10,10 @@ export declare class VegaInputRenderer extends VegaSlimmer {
   private labelSuffixButtonConfig;
   private labelButtonClickEventEmitter;
   private inputContainerRenderer;
+  private inputSuggestionsRenderer;
+  private renderModeController;
   render(): Nullable<HTMLElement>;
+  private renderInputContainer;
   private renderLabelDom;
   private renderHintDom;
   private handleLabelButtonClick;

package/dist/types/components/vega-input/types.d.ts

@@ -2,20 +2,48 @@ import { MaskConfig } from '../../helpers/formatter/string-formatter/string-mask
 import { NumberMaskConfig } from '../../helpers/formatter/string-formatter/number-mask-strategy';
 import { StringFormatStrategy } from '../../helpers/formatter/string-formatter/string-format-strategy.abstract';
 
+/**
+ * Configuration for input masking strategies.
+ */
 export type MaskConfigType = {
+	/**
+	 * Masking strategy identifier.
+	 */
 	type: 'phone' | 'zipcode' | 'taxId' | 'custom' | 'thousand-comma' | 'number' | 'custom-formatter';
+	/**
+	 * Options used by the selected mask strategy.
+	 */
 	options?: MaskConfig | NumberMaskConfig;
+	/**
+	 * Event that triggers the mask update.
+	 */
 	trigger?: 'blur' | 'input';
+	/**
+	 * Optional value formatter callback.
+	 */
 	formatter?: (value: string) => string;
+	/**
+	 * Whether to reset the caret position after formatting.
+	 */
 	resetCaretPosition?: boolean;
+	/**
+	 * Custom strategy factory.
+	 */
 	strategy?: () => StringFormatStrategy;
 };
 
+/**
+ * Source event that triggered an input's value update.
+ */
 export type InputValueUpdateTriggeredBy = 'input' | 'change';
 
+/**
+ * HTML input types supported by the component.
+ */
 export type InputType = 'text' | 'email' | 'password' | 'number' | 'hidden';
 
 /**
+ * Alias for the browser's DataTransfer interface.
  * From: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
  */
 export type DataTransferType = DataTransfer;
@@ -79,3 +107,10 @@ export type InputAutocompleteTypes =
 	| 'impp'
 	| 'url'
 	| 'photo';
+
+/**
+ * Dropdown configuration for input suggestions.
+ */
+export type VegaInputSuggestionsDropdownConfig = Partial<
+	Pick<HTMLVegaDropdownElement, 'caseSensitive' | 'itemDisplayRule' | 'isLoading' | 'searchNoResultsText'>
+>;

package/dist/types/components/vega-input/vega-input.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FormFieldValidationRule } from '../../helpers/validator/rules/form-field-validation-rule';
-import { DataTransferType, InputAutocompleteTypes, InputType, InputValueUpdateTriggeredBy, MaskConfigType } from './types';
+import { DataTransferType, InputAutocompleteTypes, InputType, InputValueUpdateTriggeredBy, MaskConfigType, VegaInputSuggestionsDropdownConfig } from './types';
 import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -18,6 +18,9 @@ import { VegaInputInputContainerRenderer } from './slimmers/renderers/vega-input
 import { VegaInputInputRenderer } from './slimmers/renderers/vega-input-input-renderer';
 import { VegaInputRenderer } from './slimmers/renderers/vega-input-renderer';
 import { VegaInputValueController } from './slimmers/controllers/vega-input-value-controller';
+import { VegaInputInputSuggestionsRenderer } from './slimmers/renderers/vega-input-input-suggestions-renderer';
+import { VegaDropdownSourceItem } from '../vega-dropdown/types';
+import { VegaInputRenderModeController } from './slimmers/controllers/vega-input-render-mode-controller';
 /**
  * @vegaVersion 1.0.5
  */
@@ -25,6 +28,7 @@ export declare class VegaInput {
   protected readonly globalSlimmers: GlobalSlimmers;
   protected readonly formFieldController: FormFieldControllerSlimmer<string>;
   protected readonly pageResizeObserverSlimmer: PageResizeObserverSlimmer;
+  protected renderModeController: VegaInputRenderModeController;
   protected copyPasteController: VegaInputCopyPasteController;
   protected compactWidthController: VegaInputCompactWidthController;
   protected stateController: VegaInputStateController;
@@ -34,10 +38,13 @@ export declare class VegaInput {
   protected renderer: VegaInputRenderer;
   protected inputContainerRenderer: VegaInputInputContainerRenderer;
   protected inputRenderer: VegaInputInputRenderer;
+  protected inputSuggestionsRenderer: VegaInputInputSuggestionsRenderer;
   protected changeEventEmitter: EventEmitSlimmerBase;
+  protected nativeInputChangeEventEmitter: EventEmitSlimmerBase;
   protected focusEventEmitter: EventEmitSlimmerBase;
   protected blurEventEmitter: EventEmitSlimmerBase;
   protected labelButtonClickEventEmitter: EventEmitSlimmerBase;
+  protected suggestionItemClickEventEmitter: EventEmitSlimmerBase;
   protected pasteEventEmitter: EventEmitSlimmerBase;
   protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer<HTMLVegaInputElement>;
   protected readonly passwordEyeRenderer: VegaInputPasswordEyeRenderer;
@@ -47,6 +54,7 @@ export declare class VegaInput {
   watchSuffixText(): void;
   isCompactInputWidth: boolean;
   isPasswordDisplay: boolean;
+  suggestionsDropdownConfig: VegaInputSuggestionsDropdownConfig;
   /**
    * Specifies the label or title for the input field.
    *
@@ -271,6 +279,14 @@ export declare class VegaInput {
    * @vegaVersion 2.1.0
    */
   disableCopyPaste: boolean;
+  /**
+   * Sets the source array of items for the suggestion dropdown.
+   *    You should set this property at least a empty array if you want enable the source mode suggestion dropdown feature.
+   *
+   * @vegaVersion 2.75.0
+   */
+  suggestionsDropdownSource: VegaDropdownSourceItem[];
+  watchSuggestionsDropdownSource(): void;
   /**
    * An event emitter notifying a value change.
    *
@@ -284,6 +300,19 @@ export declare class VegaInput {
    * @vegaVersion 2.0.0
    */
   change: EventEmitter<string>;
+  /**
+   * An event emitter notifying a value change by input action of native input dom.
+   *
+   * @vegaVersion 2.75.0
+   */
+  vegaNativeInputChange: EventEmitter<string>;
+  /**
+   * An event emitter notifying a value change by input action of native input dom.
+   *
+   * @eventSemantics namespace:native
+   * @vegaVersion 2.75.0
+   */
+  nativeInputChange: EventEmitter<string>;
   /**
    * An event emitter notifying the blur of the inner input element.
    *
@@ -336,6 +365,19 @@ export declare class VegaInput {
    * @vegaVersion 2.66.0
    */
   paste: EventEmitter<DataTransferType>;
+  /**
+   * An event emitter notifying the click of a suggestion item.
+   *
+   * @vegaVersion 2.75.0
+   */
+  vegaSuggestionItemClick: EventEmitter<VegaDropdownSourceItem>;
+  /**
+   * An event emitter notifying the click of a suggestion item.
+   *
+   * @eventSemantics namespace:native
+   * @vegaVersion 2.75.0
+   */
+  suggestionItemClick: EventEmitter<VegaDropdownSourceItem>;
   /**
    * Invoke this method to focus the current input.
    *
@@ -348,5 +390,17 @@ export declare class VegaInput {
    * @vegaVersion 1.12.0
    */
   doBlur(): Promise<void>;
+  /**
+   * Invoke this method to show the suggestions dropdown.
+   *
+   * @vegaVersion 2.75.0
+   */
+  showSuggestionsDropdown(dropdownConfig?: VegaInputSuggestionsDropdownConfig): Promise<void>;
+  /**
+   * Invoke this method to hide the suggestions dropdown.
+   *
+   * @vegaVersion 2.75.0
+   */
+  hideSuggestionsDropdown(): Promise<void>;
   render(): VegaInput;
 }

package/dist/types/components/vega-input-phone-number/types.d.ts

@@ -1,11 +1,26 @@
 import { VegaCountryCode } from '../../types/flag.type';
 
+/**
+ * Country metadata used by the phone number input.
+ */
 export type VegaCountryType = {
+	/**
+	 * Telephone calling code for the country.
+	 */
 	callingCode: string;
+	/**
+	 * Country code identifier.
+	 */
 	countryCode: VegaCountryCode;
+	/**
+	 * Localized display name for the country.
+	 */
 	name: string;
 };
 
+/**
+ * Map of country codes to localized country names.
+ */
 export type VegaCountryNameType = {
 	[countryCode in VegaCountryCode]: string;
 };

package/dist/types/components/vega-input-range/types.d.ts

@@ -1,5 +1,14 @@
+/**
+ * Value type used by the input-range component (array of stringified numbers).
+ */
 export type InputRangeValueType = string[];
 
+/**
+ * Index position for a range input when handling two-thumb sliders.
+ */
 export type RangeInputIndexType = 0 | 1;
 
+/**
+ * Orientation options for stacked input-range elements.
+ */
 export type InputRangeStackType = 'vertical' | 'horizontal';

package/dist/types/components/vega-input-select/slimmers/controllers/vega-input-select-item-controller.d.ts

@@ -0,0 +1,29 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+/** The `VegaInputSelectItemController` class is a TypeScript React component that controls the state of selected item. */
+export declare class VegaInputSelectItemController extends VegaSlimmer {
+  private value;
+  private selectType;
+  private selectedItem;
+  private sourceController;
+  private vegaInputSelectValueController;
+  /**
+   * Set initial the value of selected item
+   */
+  componentWillLoad(): void;
+  /**
+   * Reset the value of selected item based on select type
+   */
+  watchSelectType(): void;
+  /**
+   * Synchronizes the controller's selectedItem with the current value and the source data.
+   */
+  setSelectedItem(): void;
+  /**
+   * Updates the selected items array under multiple selection mode.
+   *
+   * @param {SelectSourceItem[]} originalItem - the original selected items array.
+   * @param {SelectSourceItem[]} updatedItem - the updated selected items array.
+   * @returns {SelectSourceItem[]} The updated selected items array.
+   */
+  private updateSelectedItemUnderMultiple;
+}

package/dist/types/components/vega-input-select/slimmers/controllers/vega-input-select-source-controller.d.ts

@@ -8,6 +8,7 @@ import { Nullable } from '../../../../types/general';
 export declare class VegaInputSelectSourceController extends VegaSlimmer {
   private host;
   private source;
+  private vegaInputSelectItemController;
   /**
    * convert the dropdown source when the component watchSource call
    */

package/dist/types/components/vega-input-select/slimmers/controllers/vega-input-select-value-controller.d.ts

@@ -7,6 +7,7 @@ export declare class VegaInputSelectValueController extends VegaSlimmer {
   private changeEventEmitter;
   private host;
   private sourceController;
+  private vegaInputSelectItemController;
   private vegaDropdownProps;
   /**
    * handle the value change when the component watchValue call

package/dist/types/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.d.ts

@@ -16,9 +16,9 @@ export declare class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   private isLazyLoading;
   private vegaInputSelectDropdownController;
   private vegaInputSelectPrefixIconRenderer;
-  private sourceController;
   private translationSlimmer;
   private disabled;
+  private selectedItem;
   watchVegaDropdownProps(): void;
   show(): Promise<void>;
   hide(): Promise<void>;

package/dist/types/components/vega-input-select/types.d.ts

@@ -1,10 +1,39 @@
+/**
+ * Source item used by the select component.
+ */
 export type SelectSourceItem = {
+	/**
+	 * Unique identifier for the item.
+	 */
 	id: string;
+	/**
+	 * Display label for the item.
+	 */
 	displayName: string;
 };
 
+/**
+ * Label formatter for multiple selected values.
+ */
 export type SelectedLabelType = (value: string[]) => string;
 
+/**
+ * Label formatters for single and multiple selection modes.
+ */
+export type SelectedLabelTypeForAllModes = {
+	/**
+	 * Formatter for single selection mode.
+	 */
+	single?: (value: string, selectedItem?: SelectSourceItem) => string;
+	/**
+	 * Formatter for multiple selection mode.
+	 */
+	multiple?: (value: string[], selectedItem?: SelectSourceItem[]) => string;
+};
+
+/**
+ * Dropdown configuration options for input select.
+ */
 export type VegaDropdownPropsForSelect = Partial<
 	Pick<
 		HTMLVegaDropdownElement,
@@ -24,15 +53,36 @@ export type VegaDropdownPropsForSelect = Partial<
 	>
 >;
 
+/**
+ * Size options for the input select component.
+ */
 export type VegaInputSelectSize = 'default' | 'small';
+/**
+ * Selection mode for the input select.
+ */
 export type SelectType = 'single' | 'multiple';
+/**
+ * Value type derived from selection mode.
+ */
 export type SelectValueType<T extends SelectType> = T extends 'single' ? string : string[];
 
+/**
+ * Lazy-load response structure for select data sources.
+ */
 export type VegaInputSourceLazyLoadResponse = {
+	/**
+	 * Whether more items are available to load.
+	 */
 	hasMore: boolean;
+	/**
+	 * Newly loaded items.
+	 */
 	items: SelectSourceItem[];
 };
 
+/**
+ * Callback used to lazily load input select items.
+ */
 export type VegaInputSelectSourceLazyLoadCallback = (
 	endIndex: number,
 ) => Promise<VegaInputSourceLazyLoadResponse>;

package/dist/types/components/vega-input-select/vega-input-select.d.ts

@@ -2,11 +2,12 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { BreakpointsTokenType } from '../../types/design-token.type';
 import { ResponsiveType } from '../../types/ui.type';
 import { FormFieldValidationRule } from '../../helpers/validator/rules/form-field-validation-rule';
-import { SelectedLabelType, SelectSourceItem, SelectType, SelectValueType, VegaDropdownPropsForSelect, VegaInputSelectSize, VegaInputSelectSourceLazyLoadCallback } from './types';
+import { SelectedLabelType, SelectedLabelTypeForAllModes, SelectSourceItem, SelectType, SelectValueType, VegaDropdownPropsForSelect, VegaInputSelectSize, VegaInputSelectSourceLazyLoadCallback } from './types';
 import { VegaInputSelectRenderer } from './slimmers/renderers/vega-input-select-renderer';
 import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
 import { VegaInputSelectDropdownController } from './slimmers/controllers/vega-input-select-dropdown-controller';
 import { VegaInputSelectValueController } from './slimmers/controllers/vega-input-select-value-controller';
+import { VegaInputSelectItemController } from './slimmers/controllers/vega-input-select-item-controller';
 import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input-select-dropdown-renderer';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
@@ -34,6 +35,7 @@ export declare class VegaInputSelect {
   protected readonly vegaInputSelectValueController: VegaInputSelectValueController;
   protected readonly vegaInputSelectDropdownRenderer: VegaInputSelectDropdownRenderer;
   protected readonly vegaInputSelectItemsSlotController: VegaInputSelectItemsSlotController;
+  protected readonly vegaInputSelectItemController: VegaInputSelectItemController;
   protected readonly formFieldControllerSlimmer: FormFieldControllerSlimmer<SelectValueType<SelectType>>;
   protected readonly pageResizeObserverSlimmer: PageResizeObserverSlimmer;
   protected readonly lazyLoadController: VegaInputSelectLazyLoadController;
@@ -49,6 +51,7 @@ export declare class VegaInputSelect {
   isDropdownShow: boolean;
   currentBreakpoint: BreakpointsTokenType;
   isLazyLoading: boolean;
+  selectedItem: Nullable<SelectSourceItem | SelectSourceItem[]>;
   /**
    * Specifies the label or title for the input field.
    *
@@ -75,19 +78,24 @@ export declare class VegaInputSelect {
   required: boolean;
   /**
    * Allows customization of the text displayed within the
-   *    select field when multiple items are selected.
+   *    select field when single or multiple items are selected.
    *    The default format for the selected label is
-   *    `${number of selected items} Selected`.
+   *    `${number of selected items} Selected` for multiple mode only.
+   *
+   *	To enable all modes, use the `SelectedLabelTypeForAllModes` type.
+   * 		For single mode, the default format is the `displayName` of the selected item if not set
+   * 		For multiple mode, the default format is `${number of selected items} Selected` if not set
    *
    * @vegaVersion 1.35.0
    */
-  selectedLabel: SelectedLabelType;
+  selectedLabel: SelectedLabelType | SelectedLabelTypeForAllModes;
   /**
    * Controls the selection capabilities of the associated dropdown menu.
    *
    * @vegaVersion 1.35.0
    */
   selectType: SelectType;
+  watchSelectType(): void;
   /**
    * Specifies the dataset used to populate the options
    *    available in the select input dropdown menu.

package/dist/types/components/vega-item-toggle/types.d.ts

@@ -1,8 +1,29 @@
+/**
+ * Labels and icons used for various states of an item toggle.
+ */
 export type ItemToggleStatusMap = {
+	/**
+	 * Icon shown when the item is not toggled.
+	 */
 	unToggledIcon?: string;
+	/**
+	 * Icon shown when the item is toggled.
+	 */
 	toggledIcon?: string;
+	/**
+	 * Label shown when the item is not toggled.
+	 */
 	unToggledLabel?: string;
+	/**
+	 * Label shown while toggling on.
+	 */
 	togglingLabel?: string;
+	/**
+	 * Label shown when the item is toggled.
+	 */
 	toggledLabel?: string;
+	/**
+	 * Label shown while toggling off.
+	 */
 	unTogglingLabel?: string;
 };

package/dist/types/components/vega-loading-indicator/types.d.ts

@@ -1 +1,4 @@
+/**
+ * Size options for the loading indicator component.
+ */
 export type VegaLoadingIndicatorSize = 'micro' | 'small' | 'default' | 'large';

package/dist/types/components/vega-modal/types.d.ts

@@ -1,6 +1,15 @@
+/**
+ * Options for how the backdrop behaves when the modal is open.
+ */
 export type VegaModalBackdrop = 'static' | 'none' | 'default';
+/**
+ * Color style options for the modal backdrop.
+ */
 export type VegaModalBackdropColor = 'semi' | 'none' | 'default';
 
+/**
+ * Describes what caused a modal's open state to change.
+ */
 export type VegaModalOpenStateChangeTrigger =
 	| 'backdrop' // User clicks the backdrop, and it is allowed to close the modal.
 	| 'close-button' // User clicks the close button located in the top right corner of the modal.

package/dist/types/components/vega-nav/interface.d.ts

@@ -1,43 +1,139 @@
+/**
+ * Configuration for the header of a left navigation panel.
+ */
 export declare type LeftNavHeaderConfig = {
+  /**
+   * Main title text.
+   */
   title?: string;
+  /**
+   * Optional subtitle text.
+   */
   subtitle?: string;
 };
+/**
+ * Settings for a section header within the left navigation.
+ */
 export declare type LeftNavSectionHeaderConfig = {
+  /**
+   * Title text for the section.
+   */
   title?: string;
+  /**
+   * Text for a linked action.
+   */
   actionTitle?: string;
+  /**
+   * URL for the action link.
+   */
   actionLink?: string;
+  /**
+   * If true, the action emits events instead of navigation.
+   */
   actionEventful?: boolean;
 };
+/**
+ * Represents a navigational section containing groups or links.
+ */
 export declare type LeftNavSection = {
   type: 'section';
+  /**
+   * Optional unique key for the section.
+   */
   key?: string;
+  /**
+   * Header configuration for the section.
+   */
   sectionHeader?: LeftNavSectionHeaderConfig;
+  /**
+   * Child groups or links under this section.
+   */
   children: (LeftNavGroup | LeftNavLink)[];
 };
+/**
+ * A collapsible group of links within the left navigation.
+ */
 export declare type LeftNavGroup = {
   type: 'group';
+  /**
+   * Display name for the group.
+   */
   name: string;
+  /**
+   * Optional unique key.
+   */
   key?: string;
+  /**
+   * Icon name associated with the group.
+   */
   icon?: string;
+  /**
+   * Whether the group should be expanded initially.
+   */
   openByDefault?: boolean;
+  /**
+   * Nested groups or links inside this group.
+   */
   children: (LeftNavGroup | LeftNavLink)[];
 };
+/**
+ * Configuration for an individual link in the left nav.
+ */
 export declare type LeftNavLink = {
   type: 'link';
+  /**
+   * Display text for the link.
+   */
   name: string;
+  /**
+   * Destination URL.
+   */
   url: string;
+  /**
+   * Link target behavior.
+   */
   target?: '_blank' | '_self';
+  /**
+   * Optional unique key.
+   */
   key?: string;
+  /**
+   * Icon name for the link.
+   */
   icon?: string;
+  /**
+   * Whether the link is currently selected.
+   */
   selected?: boolean;
+  /**
+   * Badge configuration for counters.
+   */
   counterBadge?: LeftNavCounterBadgeConfig;
 };
+/**
+ * Configuration for counter badges shown on nav links.
+ */
 export declare type LeftNavCounterBadgeConfig = {
+  /**
+   * Background color token for the badge.
+   */
   color?: 'bg-danger' | 'bg-action';
+  /**
+   * Counter number (deprecated alias).
+   */
   counter?: number;
+  /**
+   * Actual count value displayed.
+   */
   count?: number;
 };
+/**
+ * Union type representing any item that can appear in the left nav source.
+ */
 export declare type LeftNavSourceItem = LeftNavSection | LeftNavGroup | LeftNavLink;
+/**
+ * Represents the open/closed state of navigation sections.
+ */
 export declare type LeftNavOpenStateType = 'open' | 'close';
 /**
  * One of the types of autoCollapseGroups.
@@ -45,8 +141,20 @@ export declare type LeftNavOpenStateType = 'open' | 'close';
  * @deprecated deprecatedBooleanAlias
  */
 export declare type deprecatedBooleanAlias = boolean;
+/**
+ * Configuration options for when navigation groups should auto-collapse.
+ */
 export declare type autoCollapseGroupsType = deprecatedBooleanAlias | 'on-group-click' | 'on-link-click' | 'never' | 'always';
+/**
+ * Payload provided to observers monitoring nav group changes.
+ */
 export declare type GroupObserverPayload = {
+  /**
+   * Reference to the group element being observed.
+   */
   host: HTMLVegaLeftNavGroupElement;
 };
+/**
+ * Root element type for left navigation components.
+ */
 export declare type HTMLVegaLeftNavRoot = HTMLVegaLeftNavElement | HTMLVegaNavCardElement;

package/dist/types/components/vega-page-notification/types.d.ts

@@ -1,10 +1,25 @@
+/**
+ * Notification type options for page-level messages.
+ */
 export type VegaPageNotificationTypes = 'success' | 'info' | 'warning' | 'error';
 
+/**
+ * Configuration for an action button within a page notification.
+ */
 export type VegaPageNotificationActionButtonConfig = {
+	/**
+	 * Button label text.
+	 */
 	label: string;
+	/**
+	 * Event callback when the button is clicked.
+	 */
 	onVegaClick?: (e: CustomEvent) => void;
 };
 
+/**
+ * Mapping from notification type to associated icon name.
+ */
 export type VegaPageNotificationTypeIconMap = {
 	[key in VegaPageNotificationTypes]: string;
 };