@globalpayments/vega 2.24.0 → 2.25.0

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.js

@@ -9,23 +9,85 @@ import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { ToggleSwitchRequiredRule } from '../../helpers/validator/rules/toggle-switch-required-rule';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
+import ChangeManager from '../../helpers/change-manager/change-manager';
+/**
+ * @version 1.3.0
+ */
 export class VegaToggleSwitch {
   constructor() {
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired ? new ToggleSwitchRequiredRule() : null,
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: false,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.toggleSwitchContainer,
+      touchableAreaGetter: () => [this.toggleSwitchContainer],
+    });
     this.changeEventEmitter = createEventEmitSlimmer(VegaToggleSwitch, VegaChange);
-    /** Specifies whether the toggle switch is in the checked state. */
+    /**
+     * Specifies whether the toggle switch is in the checked state.
+     *
+     * @version 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.checked = false;
+    /**
+     * The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked.
+     *
+     * @version 2.25.0
+     */
+    this.value = false;
     /**
      * Specifies the size of the toggle switch.
+     *
+     * @version 1.3.0
      */
     this.size = 'default';
+    /**
+     * Specifies whether the toggle switch must be checked
+     *    to pass form validation.
+     *
+     * @version 2.25.0
+     */
+    this.required = false;
     /**
      * Specifies whether the toggle switch is disabled.
+     *
+     * @version 1.3.0
      */
     this.disabled = false;
+    /**
+     * Defines custom validation rules for the toggle switch.
+     *
+     * @version 2.25.0
+     */
+    this.validationRules = [];
+    /**
+     * Determines whether automatic validation should be
+     *    implemented for the toggle switch.
+     *
+     * @version 2.25.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the validation status of the toggle switch.
+     *
+     * @version 2.25.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
     /**
      * The below method is e2e-test covered in
      * @see{module:vega-toggle-switch-click-on-label-e2e}
@@ -49,7 +111,21 @@ export class VegaToggleSwitch {
     };
   }
   watchCheckedChange() {
+    this.value = this.checked;
     this.changeEventEmitter.emit(this.checked);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+  watchValue(newValue) {
+    this.checked = newValue === true;
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  componentWillLoad() {
+    this.value = this.checked;
   }
   render() {
     let divContainerCss = this.checked
@@ -58,7 +134,7 @@ export class VegaToggleSwitch {
     divContainerCss += this.disabled ? ' vega-container-disabled' : '';
     divContainerCss += this.size === 'small' ? ' vega-container-small-size' : '';
     return sanitizeVegaComponent(h(Host, null,
-      h("vega-flex", { gap: "size-8" },
+      h("vega-flex", { gap: "size-8", ref: (node) => (this.toggleSwitchContainer = node) },
         h("div", { class: `${divContainerCss} vega-flex-shrink-0 v-min-w-min` },
           h("input", { type: "checkbox", name: "switch", disabled: this.disabled, checked: this.checked, onChange: this.updateValue, "aria-label": this.label || 'No label defined', role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
           h("span", { class: this.disabled ? 'v-bg-tertiary' : 'v-bg-primary' })),
@@ -66,7 +142,7 @@ export class VegaToggleSwitch {
   }
   renderLabelDom() {
     return this.label ? (h("div", { class: "vega-flex-basis-0 vega-flex-grow" },
-      h("vega-field-label", { onClick: this.toggleSwitch, disabled: this.disabled, label: this.label }))) : null;
+      h("vega-field-label", { onClick: this.toggleSwitch, disabled: this.disabled, label: this.label, isFieldRequired: this.required }))) : null;
   }
   static get is() { return "vega-toggle-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -88,13 +164,37 @@ export class VegaToggleSwitch {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies whether the toggle switch is in the checked state."
       },
       "attribute": "checked",
       "reflect": true,
       "defaultValue": "false"
     },
+    "value": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -106,7 +206,10 @@ export class VegaToggleSwitch {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies the size of the toggle switch."
       },
       "attribute": "size",
@@ -124,12 +227,36 @@ export class VegaToggleSwitch {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies the label or title for the toggle switch."
       },
       "attribute": "label",
       "reflect": false
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies whether the toggle switch must be checked\n   to pass form validation."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -141,12 +268,81 @@ export class VegaToggleSwitch {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies whether the toggle switch is disabled."
       },
       "attribute": "disabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
+    },
+    "validationRules": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFieldValidationRule<unknown>[]",
+        "resolved": "FormFieldValidationRule<unknown>[]",
+        "references": {
+          "FormFieldValidationRule": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/form-field-validation-rule"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Defines custom validation rules for the toggle switch."
+      },
+      "defaultValue": "[]"
+    },
+    "autoValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Determines whether automatic validation should be\n   implemented for the toggle switch."
+      },
+      "attribute": "auto-validation",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "isValid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies the validation status of the toggle switch."
+      },
+      "attribute": "is-valid",
+      "reflect": true,
+      "defaultValue": "null"
     }
   }; }
   static get events() { return [{
@@ -156,7 +352,10 @@ export class VegaToggleSwitch {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "An event emitter notifying changes in the toggle switch."
       },
       "complexType": {
@@ -174,6 +373,9 @@ export class VegaToggleSwitch {
         "tags": [{
             "name": "eventSemantics",
             "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
           }],
         "text": "An event emitter notifying changes in the toggle switch."
       },
@@ -187,6 +389,12 @@ export class VegaToggleSwitch {
   static get watchers() { return [{
       "propName": "checked",
       "methodName": "watchCheckedChange"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }, {
+      "propName": "validationRules",
+      "methodName": "watchValidationRules"
     }]; }
 }
 __decorate([
@@ -195,6 +403,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaToggleSwitch.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaToggleSwitch.prototype, "formFieldController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaToggleSwitch.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-tooltip/vega-tooltip-content-box/vega-tooltip-content-box.js

@@ -8,6 +8,9 @@ import { Component, Host, h, Element, Prop } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+/**
+ * @version 2.0.0
+ */
 export class VegaTooltipContentBox {
   constructor() {
     this.globalSlimmers = {};
@@ -37,7 +40,10 @@ export class VegaTooltipContentBox {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "2.0.0"
+          }],
         "text": "Specifies the text that is displayed inside the tooltip."
       },
       "attribute": "text",

package/dist/collection/components/vega-tooltip/vega-tooltip.js

@@ -13,6 +13,9 @@ import { VegaTooltipContentBoxRenderer } from './slimmers/renderers/vega-tooltip
 import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/deprecated-property-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTooltipRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-tooltip/runtime-metrics-payload-definition';
+/**
+ * @version 1.3.0
+ */
 export class VegaTooltip {
   constructor() {
     this.globalSlimmers = {};
@@ -32,21 +35,29 @@ export class VegaTooltip {
      * - click: means the tooltip show/hide by click.
      * - hover: means the tooltip show/hide by hover.
      * - none: means tooltip is not displayed regardless of hover or click.
+     *
+     * @version 1.3.0
      */
     this.trigger = 'hover';
     /**
      * Specifies the vertical positioning of the tooltip
      *    within its container or relative to a reference point.
+     *
+     * @version 1.3.0
      */
     this.placement = 'top';
     /**
      * Determines the horizontal positioning of the tooltip
      *    within its container or relative to a reference point.
+     *
+     * @version 1.41.0
      */
     this.alignment = 'center';
     /**
      * The tooltip is interactive by default.
      * Set `disableInteractive` to `true` to deactivate this feature, causing the tooltip to close upon hover.
+     *
+     * @version 1.52.0
      */
     this.disableInteractive = false;
   }
@@ -90,7 +101,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Determines the fixed size (width) of the tooltip.\n\nIt can be provided as a number or a ResponsiveType."
       },
       "attribute": "size",
@@ -116,7 +130,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.30.0"
+          }],
         "text": "Determines the minimum width of the tooltip.\n\nIt can be provided as a number or a ResponsiveType."
       },
       "attribute": "min-width",
@@ -142,7 +159,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.30.0"
+          }],
         "text": "Determines the maximum width of the tooltip.\n\nIt can be provided as a number or a ResponsiveType."
       },
       "attribute": "max-width",
@@ -159,7 +179,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies the trigger mode for the tooltip.\n- click: means the tooltip show/hide by click.\n- hover: means the tooltip show/hide by hover.\n- none: means tooltip is not displayed regardless of hover or click."
       },
       "attribute": "trigger",
@@ -180,6 +203,9 @@ export class VegaTooltip {
         "tags": [{
             "name": "deprecated",
             "text": "This property will be removed soon and replaced by prop text"
+          }, {
+            "name": "version",
+            "text": "1.3.0"
           }],
         "text": "Specifies the content that is displayed\n   inside the tooltip."
       },
@@ -197,7 +223,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "2.0.0"
+          }],
         "text": "Specifies the text that is displayed\n   inside the tooltip."
       },
       "attribute": "text",
@@ -219,7 +248,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies the vertical positioning of the tooltip\n   within its container or relative to a reference point."
       },
       "attribute": "placement",
@@ -242,7 +274,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.41.0"
+          }],
         "text": "Determines the horizontal positioning of the tooltip\n   within its container or relative to a reference point."
       },
       "attribute": "alignment",
@@ -260,7 +295,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies the target element that will contain the tooltip popup.\n\nIf not provided, the popup will be appended to the\n   body by default. Adjust this property if you\n   encounter scrolling or positioning issues."
       },
       "attribute": "position-relative-to",
@@ -277,7 +315,10 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.52.0"
+          }],
         "text": "The tooltip is interactive by default.\nSet `disableInteractive` to `true` to deactivate this feature, causing the tooltip to close upon hover."
       },
       "attribute": "disable-interactive",

package/dist/collection/components/vega-virtual-scroll/vega-virtual-scroll.js

@@ -13,6 +13,9 @@ import { sanitizeVegaComponent } from '../../utils/component';
 import { VegaVirtualScrollModeController } from './slimmers/controllers/vega-virtual-scroll-mode-controller';
 import { VegaVirtualScrollLoadingIndicatorRenderer } from './slimmers/renderers/vega-virtual-scroll-loading-indicator-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+/**
+ * @version 1.13.0
+ */
 /**
  * Items that really need to be rendered include header, viewport and footer.
  * The number of header and footer is determined by extendItemsCount,
@@ -28,22 +31,34 @@ export class VegaVirtualScroll {
     this.loadingRenderer = new VegaVirtualScrollLoadingIndicatorRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.scrollTop = 0;
-    /** The all items of source */
+    /** The all items of source *
+     * @version 1.13.0
+     */
     this.source = [];
-    /** The approximate height of each item */
+    /** The approximate height of each item *
+     * @version 1.13.0
+     */
     this.approxItemHeight = 40;
-    /** The max height of viewport */
+    /** The max height of viewport *
+     * @version 1.13.0
+     */
     this.viewportMaxHeight = 320;
     /**
      * Determines whether the dropdown displays a loading status.
+     *
+     * @version 2.3.0
      */
     this.isLoading = false;
     /**
      * The count of the source that will be used as the threshold for determining whether to use virtual scrolling.
      * If the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used
+     *
+     * @version 2.3.0
      */
     this.virtualizationThreshold = 60;
-    /** We set this key to check the source is really change and should refresh virtual scroll */
+    /** We set this key to check the source is really change and should refresh virtual scroll *
+     * @version 1.26.0
+     */
     this.sourceItemIdentifier = 'key';
   }
   watchScrollTop() {
@@ -64,6 +79,8 @@ export class VegaVirtualScroll {
   /**
    * Scroll to the index of the item in the list by setting the scrollTop property of the virtual scroll
    * container to the index of the item multiplied by the approximate height of each item in the list.
+   *
+   * @version 1.13.0
    */
   async scrollToIndex(index) {
     methodPlaceholder(index);
@@ -96,8 +113,11 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "The all items of source"
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
+        "text": "The all items of source *"
       },
       "defaultValue": "[]"
     },
@@ -112,8 +132,11 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "The approximate height of each item"
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
+        "text": "The approximate height of each item *"
       },
       "attribute": "approx-item-height",
       "reflect": false,
@@ -130,8 +153,11 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "The max height of viewport"
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
+        "text": "The max height of viewport *"
       },
       "attribute": "viewport-max-height",
       "reflect": false,
@@ -148,7 +174,10 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "2.3.0"
+          }],
         "text": "Determines whether the dropdown displays a loading status."
       },
       "attribute": "is-loading",
@@ -166,7 +195,10 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "2.3.0"
+          }],
         "text": "The count of the source that will be used as the threshold for determining whether to use virtual scrolling.\nIf the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used"
       },
       "attribute": "virtualization-threshold",
@@ -184,8 +216,11 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "We set this key to check the source is really change and should refresh virtual scroll"
+        "tags": [{
+            "name": "version",
+            "text": "1.26.0"
+          }],
+        "text": "We set this key to check the source is really change and should refresh virtual scroll *"
       },
       "attribute": "source-item-identifier",
       "reflect": false,
@@ -210,7 +245,10 @@ export class VegaVirtualScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
         "text": "The method of render item.\nYou should bind to the host component then you can set the css and event of item on the host component.\nexample: <vega-virtual-scroll renderItem={this.renderSourceItem.bind(this)}></vega-virtual-scroll> .\nYou should watch the fixHeight, if it have value, you should set {height: `${fixHeight}px`, boxSizing: 'border-box', overflow: 'hidden'} to you item,\notherwise, you can do nothing."
       }
     }
@@ -236,7 +274,10 @@ export class VegaVirtualScroll {
       },
       "docs": {
         "text": "Scroll to the index of the item in the list by setting the scrollTop property of the virtual scroll\ncontainer to the index of the item multiplied by the approximate height of each item in the list.",
-        "tags": []
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }]
       }
     }
   }; }

package/dist/collection/constants/ui.js

@@ -76,6 +76,10 @@ export const VegaNativeEventName = [
   'expand',
   'rowSelect',
   'rowSelectAll',
+  'retry',
+  'selectedFileChange',
+  'preview',
+  'labelButtonClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];