@globalpayments/vega 2.34.1 → 2.35.0

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

@@ -2,35 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const component = require('./component-63af66ea.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const internalIconManager = require('./internal-icon-manager-2282a62f.js');
-const remoteInvocationRegistry = require('./remote-invocation-registry-71a45468.js');
+const index = require('./index-09acd3c9.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 domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-ff9af278.js');
 const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
 const staticSubjectTitle = require('./static-subject-title-d66b88fb.js');
-const changeManager = require('./change-manager-bda1d107.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-9aeabcdc.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e1a6e5ad.js');
-require('./ui-b5906704.js');
-require('./icon-manager-36dcfb65.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
-require('./dynamic-slimmer-dc30600a.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-dbb321ad.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
+require('./ui-5fd9b267.js');
+require('./icon-manager-edc2400b.js');
+require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+require('./dynamic-slimmer-f31fdfd7.js');
 require('./string-21427167.js');
-require('./translation-f6b7ee84.js');
-require('./page-resize-observer-slimmer-e54fa9d4.js');
+require('./translation-b9be41e0.js');
+require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
-require('./mutation-observer-slimmer-98bbbdf0.js');
+require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-e5a7f85a.js');
 require('./array-5adef7b2.js');
 require('./number-4816603d.js');
-require('./internal-vega-event-manager-d7643ec6.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-e97b5f29.js');
+require('./feature-flag-controller-7b22e598.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
 
@@ -45,9 +47,9 @@ class VegaInputPhoneNumberRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.inputPhoneNumberContainerRef;
   }
   render() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
+    return (index.h(index.Fragment, null,
       this.renderLabel(),
-      globalSlimmerRegistry.h("vega-flex", { class: "vega-input-phone-number-container", gap: "size-12", ref: (dom) => (this.inputPhoneNumberContainerRef = dom) },
+      index.h("vega-flex", { class: "vega-input-phone-number-container", gap: "size-12", ref: (dom) => (this.inputPhoneNumberContainerRef = dom) },
         this.countrySelectRenderer.render(),
         this.phoneNumberInputRenderer.render()),
       this.renderHint()));
@@ -58,7 +60,7 @@ class VegaInputPhoneNumberRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {HTMLVegaFieldLabelElement} An HTMLVegaFieldLabelElement is being returned.
    */
   renderLabel() {
-    return (globalSlimmerRegistry.h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
+    return (index.h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
   }
   /**
    * The function `renderHint` returns a label element with a hint text if the `hint` property is provided.
@@ -69,8 +71,8 @@ class VegaInputPhoneNumberRenderer extends globalSlimmerRegistry.VegaSlimmer {
    */
   renderHint() {
     if (this.hint) {
-      return (globalSlimmerRegistry.h("label", { class: "vega-input-phone-number-hint" },
-        globalSlimmerRegistry.h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" }, this.hint)));
+      return (index.h("label", { class: "vega-input-phone-number-hint" },
+        index.h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" }, this.hint)));
     }
   }
 }
@@ -8418,11 +8420,11 @@ class CountrySelectRenderer extends globalSlimmerRegistry.VegaSlimmer {
      * the `VegaInputPhoneNumberCountryCodeRenderer` component.
      */
     this.renderDropdownItem = (item, fixHeight) => {
-      return (globalSlimmerRegistry.h("vega-dropdown-item", { height: fixHeight, label: item.label, itemKey: item.key, key: item.key },
-        globalSlimmerRegistry.h("vega-flex", { alignItems: "center", gap: "size-12" },
-          globalSlimmerRegistry.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey(item.key), size: "size-16" }),
-          globalSlimmerRegistry.h("vega-font", { variant: "font-field-value", color: "text-primary" }, COUNTRIES[item.key]),
-          globalSlimmerRegistry.h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${item.label})`))));
+      return (index.h("vega-dropdown-item", { height: fixHeight, label: item.label, itemKey: item.key, key: item.key },
+        index.h("vega-flex", { alignItems: "center", gap: "size-12" },
+          index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey(item.key), size: "size-16" }),
+          index.h("vega-font", { variant: "font-field-value", color: "text-primary" }, COUNTRIES[item.key]),
+          index.h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${item.label})`))));
     };
     /**
      * The `private customCountriesFilter` function is a custom filter function used to filter out
@@ -8457,8 +8459,8 @@ class CountrySelectRenderer extends globalSlimmerRegistry.VegaSlimmer {
    */
   render() {
     const countries = this.getCountrySelectOptions();
-    return (globalSlimmerRegistry.h("vega-box", null,
-      globalSlimmerRegistry.h("vega-input-select", { source: countries.map((country) => ({
+    return (index.h("vega-box", null,
+      index.h("vega-input-select", { source: countries.map((country) => ({
           id: country.countryCode,
           displayName: `+${country.callingCode}`,
         })), vegaDropdownProps: {
@@ -8466,7 +8468,7 @@ class CountrySelectRenderer extends globalSlimmerRegistry.VegaSlimmer {
           size: this.estimateMaxWidthOfCountries(countries),
         }, size: this.size, prefixIcon: internalIconManager.VegaInternalIconManager.getIconKey(this.countryCode), disabled: this.disabled, placeholder: "", ref: (inputSelect) => {
           this.inputSelectRef = inputSelect;
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, domNodeSubjectObserverFactory.VegaChange, 
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, domNodeSubjectFactory.VegaChange, 
           /*
            * The below method is e2e-test covered in
            * @see{module:vega-input-phone-number-country-select-change}
@@ -8475,7 +8477,7 @@ class CountrySelectRenderer extends globalSlimmerRegistry.VegaSlimmer {
           (e) => {
             this.handleCountrySelectChange(e.detail);
           });
-          remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaDropdownRenderItemInternalOverridden), this.renderDropdownItem.bind(this));
+          remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaDropdownRenderItemInternalOverridden), this.renderDropdownItem.bind(this));
         }, value: this.countryCode })));
   }
   /*
@@ -8604,10 +8606,10 @@ class PhoneNumberInputRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * set with corresponding values or functions.
    */
   render() {
-    return (globalSlimmerRegistry.h("vega-box", { flexGrow: 1 },
-      globalSlimmerRegistry.h("vega-input", { size: this.size, disabled: this.disabled, placeholder: this.placeholder, ref: (ref) => {
+    return (index.h("vega-box", { flexGrow: 1 },
+      index.h("vega-input", { size: this.size, disabled: this.disabled, placeholder: this.placeholder, ref: (ref) => {
           this.inputRef = ref;
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, this.handleInputChange.bind(this));
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.handleInputChange.bind(this));
         }, value: this.phoneNumberInputValue, maskConfig: {
           type: 'custom-formatter',
           formatter: this.phoneNumberMaskFormatter,
@@ -8688,7 +8690,7 @@ class CountrySelectController extends globalSlimmerRegistry.VegaSlimmer {
    * Registers a remote invocation call for a dropdown search.
    */
   registerRemoteDropdownSearch() {
-    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaDropdownSearchInternalOverridden), this.filterDropdownSourcesBySearchString.bind(this));
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaDropdownSearchInternalOverridden), this.filterDropdownSourcesBySearchString.bind(this));
   }
   /**
    * Remote invocation call for a dropdown search.
@@ -8749,6 +8751,12 @@ class VegaInputPhoneNumberValueController extends globalSlimmerRegistry.VegaSlim
   componentWillLoad() {
     this.updateValue(this.value);
   }
+  /**
+   * watch emptyValueEnabled change
+   */
+  watchEmptyValueEnabled() {
+    this.updateValue(this.value);
+  }
   /**
    * The `watchValue` function updates a value and emits change events based on certain conditions.
    *
@@ -8760,7 +8768,7 @@ class VegaInputPhoneNumberValueController extends globalSlimmerRegistry.VegaSlim
    */
   watchValue(newValue, oldValue) {
     this.updateValue(newValue);
-    if (oldValue && oldValue !== this.value) {
+    if ((oldValue || (this.emptyValueEnabled && oldValue === '')) && oldValue !== this.value) {
       this.changeEventEmitter.emit(this.value);
       changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
         host: this.host,
@@ -8786,14 +8794,19 @@ class VegaInputPhoneNumberValueController extends globalSlimmerRegistry.VegaSlim
    * function is responsible for updating the phone number value based on the input provided.
    */
   updateValue(value) {
+    if (this.shouldSetEmptyValue(value)) {
+      this.value = '';
+      this.phoneNumberInputValue = '';
+      return;
+    }
     if (!value) {
       this.countrySelectController.setCountryCode(CountrySelectController.defaultCountryCode);
       this.value = `+${getCountryCallingCode(CountrySelectController.defaultCountryCode)}`;
       return;
     }
     const newValue = parseIncompletePhoneNumber(value);
-    this.value = parseIncompletePhoneNumber(newValue);
     this.phoneNumberInputValue = this.formatNationalNumber(newValue);
+    this.trySetValue(this.phoneNumberInputValue, () => parseIncompletePhoneNumber(newValue));
   }
   /*
    * The below method is e2e-test covered in
@@ -8806,7 +8819,7 @@ class VegaInputPhoneNumberValueController extends globalSlimmerRegistry.VegaSlim
    * @param {VegaCountryCode} newCountry - new country code
    */
   updateValueWithNewCountry(newCountry) {
-    this.value = this.formatValue(parseIncompletePhoneNumber(this.phoneNumberInputValue), newCountry);
+    this.trySetValue(this.phoneNumberInputValue, () => this.formatValue(parseIncompletePhoneNumber(this.phoneNumberInputValue), newCountry));
   }
   /**
    * The `formatValue` function concatenates a calling code prefix with a national number.
@@ -8839,6 +8852,24 @@ class VegaInputPhoneNumberValueController extends globalSlimmerRegistry.VegaSlim
       return value.replace('+', '').trim();
     }
   }
+  /**
+   * Set value
+   *
+   * @param {string} inputValue - The value of phone number input.
+   * @param {Function} formatValue - Format value callback
+   */
+  trySetValue(inputValue, formatValue) {
+    this.value = this.shouldSetEmptyValue(inputValue) ? '' : formatValue();
+  }
+  /**
+   * Should set value of phone number to empty string
+   *
+   * @param {string} inputValue - The value of phone number input
+   * @returns {boolean} -
+   */
+  shouldSetEmptyValue(inputValue) {
+    return !inputValue && this.emptyValueEnabled;
+  }
 }
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField()
@@ -8858,9 +8889,15 @@ __decorate$1([
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaInputPhoneNumberValueController.prototype, "phoneNumberInputValue", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "emptyValueEnabled", void 0);
 __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaInputPhoneNumberValueController.prototype, "componentWillLoad", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchEmptyValueEnabled')
+], VegaInputPhoneNumberValueController.prototype, "watchEmptyValueEnabled", null);
 __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('watchValue')
 ], VegaInputPhoneNumberValueController.prototype, "watchValue", null);
@@ -9049,11 +9086,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaInputPhoneNumber = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaChange = globalSlimmerRegistry.createEvent(this, "vegaChange", 7);
-    this.change = globalSlimmerRegistry.createEvent(this, "change", 7);
-    this.vegaCountryChange = globalSlimmerRegistry.createEvent(this, "vegaCountryChange", 7);
-    this.countryChange = globalSlimmerRegistry.createEvent(this, "countryChange", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaCountryChange = index.createEvent(this, "vegaCountryChange", 7);
+    this.countryChange = index.createEvent(this, "countryChange", 7);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.valueController = new VegaInputPhoneNumberValueController();
@@ -9061,9 +9098,9 @@ const VegaInputPhoneNumber = class {
     this.countrySelectRenderer = new CountrySelectRenderer();
     this.phoneNumberInputRenderer = new PhoneNumberInputRenderer();
     this.countrySelectController = new CountrySelectController();
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputPhoneNumber, domNodeSubjectObserverFactory.VegaChange);
-    this.countryChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputPhoneNumber, domNodeSubjectObserverFactory.VegaCountryChange);
-    this.inputPhoneNumberEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.host, true);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputPhoneNumber, domNodeSubjectFactory.VegaChange);
+    this.countryChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputPhoneNumber, domNodeSubjectFactory.VegaCountryChange);
+    this.inputPhoneNumberEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.host, true);
     this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -9131,6 +9168,14 @@ const VegaInputPhoneNumber = class {
      * @vegaVersion 2.18.0
      */
     this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
+    /**
+     * Specifies whether the phone number input field can be set to an empty value.
+     *   When set to true, the value of phoneNumber is cleared when the input field is empty.
+     *   When set to false, the value of phoneNumber is always composed of the country code and phone number, even if the input field is empty.
+     *
+     * @vegaVersion 2.35.0
+     */
+    this.emptyValueEnabled = false;
     /**
      * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
      *
@@ -9170,16 +9215,19 @@ const VegaInputPhoneNumber = class {
   }
   watchCountryCode(newCountryCode, oldCountryCode) {
   }
+  watchEmptyValueEnabled() {
+  }
   watchValue(newValue, oldValue) {
   }
   watchValidationRules() {
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.inputPhoneNumberRenderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.inputPhoneNumberRenderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "countryCode": ["watchCountryCode"],
+    "emptyValueEnabled": ["watchEmptyValueEnabled"],
     "value": ["watchValue"],
     "validationRules": ["watchValidationRules"]
   }; }

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

@@ -2,34 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const component = require('./component-63af66ea.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-9aeabcdc.js');
+const index = require('./index-09acd3c9.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 eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-dbb321ad.js');
 const array = require('./array-5adef7b2.js');
-const changeManager = require('./change-manager-bda1d107.js');
+const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-d66b88fb.js');
-const ui = require('./ui-b5906704.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e1a6e5ad.js');
+const ui = require('./ui-5fd9b267.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const translationSlimmer = require('./translation-slimmer-90f9f71f.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./internal-vega-event-manager-d7643ec6.js');
+const translationSlimmer = require('./translation-slimmer-ec76c5a2.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
 require('./string-21427167.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
+require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
 require('./vega-internal-event-id-85b68849.js');
-require('./translation-f6b7ee84.js');
-require('./page-resize-observer-slimmer-e54fa9d4.js');
+require('./translation-b9be41e0.js');
+require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
-require('./mutation-observer-slimmer-98bbbdf0.js');
+require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-e5a7f85a.js');
 require('./number-4816603d.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-e97b5f29.js');
+require('./feature-flag-controller-7b22e598.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
 
@@ -59,9 +61,9 @@ class VegaInputRangeRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * included in the returned structure.
    */
   render() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
-      globalSlimmerRegistry.h("vega-flex", { class: "vega-input-range-container", direction: this.stack !== 'horizontal' ? 'col' : 'row', alignItems: this.stack !== 'horizontal' ? 'start' : 'center', gap: "size-8", ref: (dom) => (this.inputRangeContainerRef = dom) },
-        globalSlimmerRegistry.h("vega-field-label", { onClick: this.inputRangeInputRenderer.focusFirstInput, isFieldRequired: this.required, disabled: this.disabled, label: this.label }),
+    return (index.h(index.Fragment, null,
+      index.h("vega-flex", { class: "vega-input-range-container", direction: this.stack !== 'horizontal' ? 'col' : 'row', alignItems: this.stack !== 'horizontal' ? 'start' : 'center', gap: "size-8", ref: (dom) => (this.inputRangeContainerRef = dom) },
+        index.h("vega-field-label", { onClick: this.inputRangeInputRenderer.focusFirstInput, isFieldRequired: this.required, disabled: this.disabled, label: this.label }),
         this.inputRangeInputRenderer.render()),
       this.renderHintDom()));
   }
@@ -74,8 +76,8 @@ class VegaInputRangeRenderer extends globalSlimmerRegistry.VegaSlimmer {
    */
   renderHintDom() {
     if (this.hint) {
-      return (globalSlimmerRegistry.h("label", { class: "vega-input-range-hint" },
-        globalSlimmerRegistry.h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" }, this.hint)));
+      return (index.h("label", { class: "vega-input-range-hint" },
+        index.h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" }, this.hint)));
     }
   }
 }
@@ -222,22 +224,22 @@ class VegaInputRangeInputRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
   /** The `render()` method in the `VegaInputRangeInputRenderer` class is responsible for rendering the JSX structure of the input range component. Here's a breakdown of what the `render()` method is doing: */
   render() {
-    return (globalSlimmerRegistry.h("vega-box", { class: {
+    return (index.h("vega-box", { class: {
         'vega-input-range-input-container': true,
         'input-range-disabled': this.disabled,
         'input-range-mobile': this.isMobileDevice,
         'input-range-with-clear-icon': this.showClearIcon && !this.disabled,
       }, corners: "rounded-8", backgroundColor: this.disabled ? 'bg-secondary' : 'bg-primary' },
-      globalSlimmerRegistry.h("vega-flex", { "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
-        globalSlimmerRegistry.h("vega-input", Object.assign({ prefixIcon: this.prefixIcon }, this.getInputPropsByRangeIndex(0), { ref: (input) => {
-            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, domNodeSubjectObserverFactory.VegaChange, this.inputValueChange);
+      index.h("vega-flex", { "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
+        index.h("vega-input", Object.assign({ prefixIcon: this.prefixIcon }, this.getInputPropsByRangeIndex(0), { ref: (input) => {
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, domNodeSubjectFactory.VegaChange, this.inputValueChange);
             this.minFieldInputRef = input;
           } })),
-        globalSlimmerRegistry.h("span", { class: "vega-input-range-divider" }),
-        globalSlimmerRegistry.h("vega-input", Object.assign({ class: {
+        index.h("span", { class: "vega-input-range-divider" }),
+        index.h("vega-input", Object.assign({ class: {
             'with-left-padding-in-mobile': !!this.prefixIcon && this.isMobileDevice,
           } }, this.getInputPropsByRangeIndex(1), { ref: (input) => {
-            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, domNodeSubjectObserverFactory.VegaChange, this.inputValueChange);
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, domNodeSubjectFactory.VegaChange, this.inputValueChange);
             this.maxFieldInputRef = input;
           } }))),
       this.clearIconRenderer.render()));
@@ -491,11 +493,11 @@ class VegaInputRangeClearIconRenderer extends globalSlimmerRegistry.VegaSlimmer
    * @returns {HTMLElement} the clear button
    */
   render() {
-    return (globalSlimmerRegistry.h("div", { class: {
+    return (index.h("div", { class: {
         'vega-input-range-clear-icon': true,
         'invisible': !this.shouldShowClearIcon(),
       }, "aria-label": "clear input range", role: "button", tabindex: "-1", onClick: this.clearInputRangeValue, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() },
-      globalSlimmerRegistry.h("vega-icon", { icon: "close" })));
+      index.h("vega-icon", { icon: "close" })));
   }
   /**
    * It is responsible for determining whether the clear icon should be displayed based on certain conditions.
@@ -539,9 +541,9 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaInputRange = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaChange = globalSlimmerRegistry.createEvent(this, "vegaChange", 7);
-    this.change = globalSlimmerRegistry.createEvent(this, "change", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
@@ -574,8 +576,8 @@ const VegaInputRange = class {
     this.clearIconRenderer = new VegaInputRangeClearIconRenderer();
     this.inputRangeRenderer = new VegaInputRangeRenderer();
     this.valueController = new VegaInputRangeValueController();
-    this.inputChangeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.inputRangeRenderer.getInputRangeContainerRef());
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputRange, domNodeSubjectObserverFactory.VegaChange);
+    this.inputChangeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.inputRangeRenderer.getInputRangeContainerRef());
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputRange, domNodeSubjectFactory.VegaChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * Specifies the label or title for the input range.
@@ -702,9 +704,9 @@ const VegaInputRange = class {
   watchValidationRules() {
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: { disabled: this.disabled } }, this.inputRangeRenderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: { disabled: this.disabled } }, this.inputRangeRenderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["watchValue"],
     "validationRules": ["watchValidationRules"]