@globalpayments/vega 2.39.0 → 2.40.0

package/dist/cjs/vega-date-picker_2.cjs.entry.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
+const dateRequiredRule = require('./date-required-rule-4e1f84fd.js');
 const date = require('./date-0a6bb035.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const ui = require('./ui-5fd9b267.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
@@ -19,7 +21,7 @@ const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03dd
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-f45931fd.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-c6e0f4ca.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-4f0dc8c6.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./vega-skeleton-loader-controller-00dbdf29.js');
 const featureFlagController = require('./feature-flag-controller-7b22e598.js');
@@ -55,95 +57,10 @@ require('./internal-vega-event-manager-981dfd1c.js');
 require('./index-8b247c17.js');
 require('./keyboard-manager-2df53b2f.js');
 
-/**
- * A rule that checks if date is empty or not
- *
- * @implements {FormFieldValidationRule<string | string[]>}
- */
-class DateRequiredRule {
-  /**
-   * It creates a new instance of the class with the given config.
-   *
-   * @param {{ mode: 'single' | 'range' }} config - config including the mode for date value
-   * @param {'single' | 'range'} config.mode - The mode for date value
-   */
-  constructor(config) {
-    this.config = config;
-  }
-  /**
-   * If the input is not valid for the current mode, throw an error.
-   * Otherwise, return an object with a boolean indicating whether the input is valid and a message to display to the user
-   *
-   * @param {string | string[]} input - The value of the input field.
-   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
-   */
-  evaluate(input) {
-    if (!this.isAcceptedInputType(input)) {
-      throw new Error(`Invalid date value ${input} for mode ${this.config.mode}`);
-    }
-    let isValid;
-    switch (this.config.mode) {
-      case 'single':
-        isValid = date.isDateStr(input);
-        break;
-      case 'range':
-        isValid = Array.isArray(input) && input.length === 2 && input.every(date.isDateStr);
-        break;
-    }
-    return {
-      isValid,
-      message: isValid ? '' : 'This field is required',
-    };
-  }
-  /**
-   * If the input is accepted and the status is not disabled and visible, then return true
-   *
-   * @param {unknown} input - The input to be evaluated.
-   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
-   * @returns {boolean} A boolean value.
-   */
-  canEvaluate(input, status) {
-    return status
-      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
-      : this.isAcceptedInputType(input);
-  }
-  /**
-   * If the field is not disabled, visible, and has been touched or modified, then show the error
-   *
-   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
-   * @returns {boolean} A boolean value.
-   */
-  shouldShowError(status) {
-    return !status.disabled && status.visible && (status.touched || status.modified);
-  }
-  /**
-   * If the input is undefined or null, return true. Otherwise, if the mode is 'single', return true if
-   * the input is a string. Otherwise, if the mode is 'range', return true if the input is an array. Otherwise, return false.
-   *
-   * @param {unknown} input - The input value that the user has entered.
-   * @returns {boolean} A boolean value.
-   */
-  isAcceptedInputType(input) {
-    if (input === undefined || input === null)
-      return true;
-    if (!this.config.mode) {
-      throw new Error(`Unexpected type of mode: ${this.config.mode}`);
-    }
-    switch (this.config.mode) {
-      case 'single':
-        return typeof input === 'string';
-      case 'range':
-        return Array.isArray(input);
-      default:
-        return false;
-    }
-  }
-}
-
 /**
  * A rule that checks if start date is before than end date
  */
-class DateRangeRule {
+class DateRangeRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
   /**
    * If the input is accepted and the status is not disabled and visible, then return true
    *
@@ -197,7 +114,7 @@ class DateRangeRule {
 /**
  * A rule that checks if date is in minDate and maxDate range
  */
-class MinAndMaxDateRule {
+class MinAndMaxDateRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
   /**
    * It creates a new instance of the class with the given config.
    *
@@ -206,6 +123,7 @@ class MinAndMaxDateRule {
    * @param {string} config.maxDate - The maxDate
    */
   constructor(config) {
+    super();
     /**
      *  Evaluate if single date is within the min and max date range
      *
@@ -2278,7 +2196,7 @@ const VegaDatePicker = class {
       propertyRules: [
         {
           propertyName: 'required',
-          ruleFactory: (isRequired, mode) => isRequired ? new DateRequiredRule({ mode }) : null,
+          ruleFactory: (isRequired, mode) => isRequired ? new dateRequiredRule.DateRequiredRule({ mode }) : null,
           dependence: 'mode',
         },
         {

package/dist/cjs/vega-dialog_2.cjs.entry.js

@@ -370,6 +370,12 @@ class VegaModalLayoutController extends globalSlimmerRegistry.VegaSlimmer {
   watchSize() {
     this.setModalWidth('update');
   }
+  /**
+   * Listen watchContentMaxHeight method to be called
+   */
+  watchContentMaxHeight() {
+    this.setContentMaxHeight();
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-default-e2e}
@@ -456,6 +462,9 @@ __decorate$7([
 __decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchSize')
 ], VegaModalLayoutController.prototype, "watchSize", null);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('watchContentMaxHeight')
+], VegaModalLayoutController.prototype, "watchContentMaxHeight", null);
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -525,6 +534,10 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  * Modal scroll controller
  */
 class VegaModalScrollController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.scrollEventListenerAdded = false;
+  }
   /**
    * Component lifecycle - [connectedCallback]
    */
@@ -533,6 +546,14 @@ class VegaModalScrollController extends globalSlimmerRegistry.VegaSlimmer {
       this.listenContentScroll();
     }
   }
+  /**
+   * Listen watchContentMaxHeight method to be called
+   */
+  watchContentMaxHeight() {
+    if (!this.scrollEventListenerAdded && this.isContentScrollable()) {
+      this.listenContentScroll();
+    }
+  }
   /**
    * Is modal content scrollable.
    *
@@ -561,6 +582,7 @@ class VegaModalScrollController extends globalSlimmerRegistry.VegaSlimmer {
       }
       this.notifyContentScrolling();
     });
+    this.scrollEventListenerAdded = true;
   }
   /*
    * The below method is e2e-test covered in
@@ -588,6 +610,9 @@ __decorate$5([
 __decorate$5([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaModalScrollController.prototype, "componentDidLoad", null);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('watchContentMaxHeight')
+], VegaModalScrollController.prototype, "watchContentMaxHeight", null);
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1066,6 +1091,8 @@ const VegaModal = class {
   }
   watchOpen() {
   }
+  watchContentMaxHeight() {
+  }
   disconnectedCallback() {
     this.open = false;
   }
@@ -1111,7 +1138,8 @@ const VegaModal = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "size": ["watchSize"],
-    "open": ["watchOpen"]
+    "open": ["watchOpen"],
+    "contentMaxHeight": ["watchContentMaxHeight"]
   }; }
 };
 __decorate([

package/dist/cjs/vega-dropdown_5.cjs.entry.js

@@ -13,7 +13,7 @@ const accessibility = require('./accessibility-bfa227f6.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
 const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-feba3a83.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-c6e0f4ca.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-4f0dc8c6.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-32aaf6c2.js');
 const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
 const array = require('./array-5adef7b2.js');

package/dist/cjs/vega-env-manager-23b8b23c.js

@@ -11,9 +11,9 @@ exports.FrameworkEnum = void 0;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.39.0` will be replaced to a version string when running publish script.
+    // The `2.40.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.39.0';
+    this.vegaVersion = '2.40.0';
     this.framework = exports.FrameworkEnum.VanillaJs;
   }
   /**

package/dist/cjs/vega-file-uploader.cjs.entry.js

@@ -15,8 +15,8 @@ const trashCan = require('./trash-can-46a5e19a.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
-const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
+const fileUploaderRequiredRule = require('./file-uploader-required-rule-313ec9e3.js');
 const translationSlimmer = require('./translation-slimmer-510906bc.js');
 require('./icon-manager-edc2400b.js');
 require('./observer-f49483e8.js');
@@ -30,10 +30,12 @@ require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-e5a7f85a.js');
 require('./array-5adef7b2.js');
 require('./number-4816603d.js');
+require('./required-field-rule-d73c1d8c.js');
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -462,22 +464,6 @@ __decorate$3([
   globalSlimmerRegistry.MapToComponentMethod('watchValue')
 ], VegaFileUploaderValueController.prototype, "valueChangeHandler", null);
 
-/**
- * A rule that checks the value is empty or not which value type is object array
- */
-class ObjectArrayRequiredRule extends requiredFieldRule.RequiredFieldRule {
-  constructor() {
-    super(...arguments);
-    /**
-     * re-define the object array check item type method
-     *
-     * @param {unknown} item the array item
-     * @returns {boolean} true or false
-     */
-    this.checkArrayItemType = (item) => !!(item && typeof item === 'object');
-  }
-}
-
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -596,7 +582,7 @@ const VegaFileUploader = class {
       propertyRules: [
         {
           propertyName: 'required',
-          ruleFactory: (isRequired) => (isRequired ? new ObjectArrayRequiredRule() : null),
+          ruleFactory: (isRequired) => isRequired ? new fileUploaderRequiredRule.FileUploaderRequiredRule() : null,
         },
       ],
       validationRulesName: 'validationRules',

package/dist/cjs/vega-form.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const observer = require('./observer-f49483e8.js');
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
@@ -26,6 +26,7 @@ require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./dom-node-subject-observer-factory-80b3ac6c.js');
 require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-e5a7f85a.js');

package/dist/cjs/vega-image-uploader.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
-const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
+const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const responsiveFormatFacade = require('./responsive-format-facade-a1983026.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
@@ -15,11 +15,12 @@ const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const vegaDialogController = require('./vega-dialog-controller-fe610705.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const ui = require('./ui-5fd9b267.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
 const translationSlimmer = require('./translation-slimmer-510906bc.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./type-guard-4ba85fdc.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');

package/dist/cjs/vega-input-credit-card.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-09acd3c9.js');
 const featureFlagController = require('./feature-flag-controller-7b22e598.js');
 const regex = require('./regex-c1f70fd4.js');
-const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
-const validCreditCardNumberRule = require('./valid-credit-card-number-rule-4a9ae5d9.js');
+const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
+const validCreditCardNumberRule = require('./valid-credit-card-number-rule-4a1b00b8.js');
 const component = require('./component-73a88c4e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
@@ -20,6 +20,7 @@ const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
 const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./number-4816603d.js');
 require('./string-21427167.js');
 require('./observer-f49483e8.js');

package/dist/cjs/vega-input-numeric.cjs.entry.js

@@ -14,8 +14,8 @@ const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-feba3a83.js');
 const number = require('./number-4816603d.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
-const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
+const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-b1f1e61a.js');
 require('./observer-f49483e8.js');
 require('./ui-5fd9b267.js');
@@ -34,6 +34,7 @@ require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-e5a7f85a.js');
 require('./array-5adef7b2.js');

package/dist/cjs/vega-input-phone-number.cjs.entry.js

@@ -13,8 +13,10 @@ const remoteInvocationRegistry = require('./remote-invocation-registry-32aaf6c2.
 const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
+const inputPhoneNumberRequiredRule = require('./input-phone-number-required-rule-2668fdf1.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
 require('./observer-f49483e8.js');
 require('./ui-5fd9b267.js');
@@ -8922,10 +8924,11 @@ __decorate$1([
 /**
  * A rule that checks if it's a valid phone number
  *
- * @implements {FormFieldValidationRule<string>}
+ * @augments {InternalFormFieldValidationRule<string>}
  */
-class ValidPhoneNumberRule {
+class ValidPhoneNumberRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
   constructor(countryCodeGetter, emptyValueEnabled = false) {
+    super();
     this.countryCodeGetter = countryCodeGetter;
     this.emptyValueEnabled = emptyValueEnabled;
     /**
@@ -9035,65 +9038,6 @@ class ValidPhoneNumberRule {
   }
 }
 
-/**
- * A rule that checks if input phone number is empty or not
- *
- * @implements {FormFieldValidationRule<string>}
- */
-class InputPhoneNumberRequiredRule {
-  constructor(phoneNumberValueGetter) {
-    this.phoneNumberValueGetter = phoneNumberValueGetter;
-  }
-  /**
-   * It checks if the input is a valid value.
-   *
-   * @param {unknown} input - The value of the input field.
-   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
-   */
-  evaluate(input) {
-    if (!this.isAcceptedInputType(input)) {
-      throw new Error(`Invalid value ${input} for input phone number`);
-    }
-    const isValid = this.phoneNumberValueGetter() !== '';
-    return {
-      isValid,
-      message: isValid ? '' : 'This field is required',
-    };
-  }
-  /**
-   * If the input is accepted and the status is not disabled and visible, then return true
-   *
-   * @param {unknown} input - The input to be evaluated.
-   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
-   * @returns {boolean} A boolean value.
-   */
-  canEvaluate(input, status) {
-    return status
-      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
-      : this.isAcceptedInputType(input);
-  }
-  /**
-   * If the field is not disabled, visible, and has been touched or modified, then show the error
-   *
-   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
-   * @returns {boolean} A boolean value.
-   */
-  shouldShowError(status) {
-    return !status.disabled && status.visible && (status.touched || status.modified);
-  }
-  /**
-   * If the input is undefined or null, return true, otherwise return true if the input is a string.
-   *
-   * @param {unknown} input - The input value to be validated.
-   * @returns {boolean}A boolean.
-   */
-  isAcceptedInputType(input) {
-    if (input === undefined || input === null)
-      return true;
-    return typeof input === 'string';
-  }
-}
-
 const vegaInputPhoneNumberCss = ":host{display:inline-block;width:100%}:host .vega-input-phone-number-hint{display:inline-block;padding-top:12px;padding-left:8px;padding-right:8px}:host .vega-input-phone-number-container.error vega-input::part(input-container){border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-input-phone-number-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));box-shadow:0 0 0}:host vega-field-label{margin-bottom:8px}:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}.vega-input-phone-number-dropdown-item{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}.vega-input-phone-number-dropdown-icon{text-align:center;font-size:0px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -9128,7 +9072,7 @@ const VegaInputPhoneNumber = class {
         {
           propertyName: 'required',
           ruleFactory: (isRequired) => isRequired
-            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
+            ? new inputPhoneNumberRequiredRule.InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
             : null,
         },
         {

package/dist/cjs/vega-input-range.cjs.entry.js

@@ -8,13 +8,15 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const array = require('./array-5adef7b2.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
 const ui = require('./ui-5fd9b267.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
+const inputRangeRequiredRule = require('./input-range-required-rule-5b9c2a95.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const translationSlimmer = require('./translation-slimmer-510906bc.js');
 require('./dynamic-slimmer-f31fdfd7.js');
@@ -320,68 +322,10 @@ __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputRangeInputRenderer.prototype, "translationSlimmer", void 0);
 
-/**
- * A rule that checks if input range is empty or not
- *
- * @implements {FormFieldValidationRule<string[]>}
- */
-class InputRangeRequiredRule {
-  /**
-   * It checks if the input is a valid value.
-   *
-   * @param {string[]} input - The value of the input field.
-   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
-   */
-  evaluate(input) {
-    if (!this.isAcceptedInputType(input)) {
-      throw new Error(`Invalid value ${input} for input range`);
-    }
-    const isValid = Array.isArray(input) &&
-      input.length === 2 &&
-      input.every((item) => !!item || item == '0');
-    return {
-      isValid,
-      message: isValid ? '' : 'This field is required',
-    };
-  }
-  /**
-   * If the input is accepted and the status is not disabled and visible, then return true
-   *
-   * @param {unknown} input - The input to be evaluated.
-   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
-   * @returns {boolean} A boolean value.
-   */
-  canEvaluate(input, status) {
-    return status
-      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
-      : this.isAcceptedInputType(input);
-  }
-  /**
-   * If the field is not disabled, visible, and has been touched or modified, then show the error
-   *
-   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
-   * @returns {boolean} A boolean value.
-   */
-  shouldShowError(status) {
-    return !status.disabled && status.visible && (status.touched || status.modified);
-  }
-  /**
-   * If the input is undefined or null, return true, otherwise return true if the input is a string.
-   *
-   * @param {unknown} input - The input value to be validated.
-   * @returns {boolean}A boolean.
-   */
-  isAcceptedInputType(input) {
-    if (input === undefined || input === null)
-      return true;
-    return Array.isArray(input);
-  }
-}
-
 /**
  * A rule that checks if number is in min and max range
  */
-class InputRangeMinAndMaxRule {
+class InputRangeMinAndMaxRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
   /**
    * It creates a new instance of the class with the given config.
    *
@@ -390,6 +334,7 @@ class InputRangeMinAndMaxRule {
    * @param {string} config.maxValue - The max number
    */
   constructor(config) {
+    super();
     /**
      * Generate an invalid result
      *
@@ -551,7 +496,7 @@ const VegaInputRange = class {
       propertyRules: [
         {
           propertyName: 'required',
-          ruleFactory: (isRequired) => (isRequired ? new InputRangeRequiredRule() : null),
+          ruleFactory: (isRequired) => (isRequired ? new inputRangeRequiredRule.InputRangeRequiredRule() : null),
         },
         {
           propertyName: 'min',

package/dist/cjs/vega-input-select.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
+const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const component = require('./component-73a88c4e.js');
 const breakpoints = require('./breakpoints-17d6c4c7.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
@@ -20,7 +20,7 @@ const accessibility = require('./accessibility-bfa227f6.js');
 const chevronUp = require('./chevron-up-21465cf7.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
 const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-bb1eaebe.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
@@ -28,6 +28,7 @@ const typeGuard = require('./type-guard-4ba85fdc.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
 const mutationObserverFilters = require('./mutation-observer-filters-e5a7f85a.js');
 const translationSlimmer = require('./translation-slimmer-510906bc.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
 require('./number-4816603d.js');

package/dist/cjs/vega-input.cjs.entry.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const minNumberRule = require('./min-number-rule-115c5a3b.js');
-const minStringLengthRule = require('./min-string-length-rule-75f24a48.js');
-const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
+const minNumberRule = require('./min-number-rule-5bcccc8f.js');
+const minStringLengthRule = require('./min-string-length-rule-af215976.js');
+const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const component = require('./component-73a88c4e.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const componentLoadRequired = require('./component-load-required-16d76afa.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
 const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
@@ -52,9 +53,9 @@ const EMAIL_VALIDATION_REGEX =
 /**
  * This class is a rule that checks if the input is a valid email address
  *
- * @implements {FormFieldValidationRule<string>}
+ * @augments {InternalFormFieldValidationRule<string>}
  */
-class EmailFieldRule {
+class EmailFieldRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
   /**
    * It checks if the input is a valid email address.
    *