@globalpayments/vega 2.28.1 → 2.29.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const minNumberRule = require('./min-number-rule-84f21ad9.js');
+const minNumberRule = require('./min-number-rule-115c5a3b.js');
 const minStringLengthRule = require('./min-string-length-rule-75f24a48.js');
 const requiredFieldRule = require('./required-field-rule-9a57b1a0.js');
 const component = require('./component-73a88c4e.js');
@@ -12,29 +12,30 @@ 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-1ee24991.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-223f8ee3.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-a4231b97.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
 const vegaEventId = require('./vega-event-id-e40ac8f0.js');
-const staticSubjectTitle = require('./static-subject-title-3599787e.js');
+const staticSubjectTitle = require('./static-subject-title-471e1793.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-79272527.js');
 const typeGuard = require('./type-guard-a07b353b.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
-require('./number-459031f7.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-a8cf1874.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-c1332b19.js');
+require('./number-4816603d.js');
 require('./string-21427167.js');
 require('./observer-f49483e8.js');
 require('./ui-08f33116.js');
-require('./create-public-api-runtime-metrics-slimmer-7510221b.js');
+require('./create-public-api-runtime-metrics-slimmer-5cc88124.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./vega-internal-event-id-c98e9a7d.js');
-require('./translation-0dd74433.js');
-require('./page-resize-observer-slimmer-a8cf1874.js');
+require('./vega-internal-event-id-99cc22e1.js');
+require('./translation-42c1b2c8.js');
+require('./mutation-observer-slimmer-895b3d3e.js');
+require('./mutation-observer-filters-e5a7f85a.js');
+require('./array-5adef7b2.js');
+require('./internal-vega-event-manager-4d9a8e67.js');
 require('./breakpoints-7e2dff90.js');
 require('./ui-32e69595.js');
-require('./mutation-observer-slimmer-895b3d3e.js');
-require('./mutation-observer-filters-79b60f28.js');
-require('./array-6e559cde.js');
-require('./internal-vega-event-manager-627b1328.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
 
@@ -101,7 +102,7 @@ class EmailFieldRule {
   }
 }
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (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);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -140,11 +141,11 @@ class VegaInputCopyPasteController extends globalSlimmerRegistry.VegaSlimmer {
     e.preventDefault();
   }
 }
-__decorate$3([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputCopyPasteController.prototype, "disableCopyPaste", void 0);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -173,10 +174,10 @@ class VegaInputPrefixSlotRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.host.querySelector('[slot="prefix-icon"]') ? true : false;
   }
 }
-__decorate$2([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputPrefixSlotRenderer.prototype, "host", void 0);
-__decorate$2([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputPrefixSlotRenderer.prototype, "prefixIcon", void 0);
 
@@ -457,7 +458,7 @@ class NumberThousandCommaStrategy extends NumberMaskStrategy {
   }
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (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);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -584,13 +585,13 @@ class VegaInputMaskConfigController extends stringInputFormatterSlimmer.StringIn
     return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
   }
 }
-__decorate$1([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputMaskConfigController.prototype, "maskConfig", void 0);
-__decorate$1([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputMaskConfigController.prototype, "disableCopyPaste", void 0);
-__decorate$1([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputMaskConfigController.prototype, "type", void 0);
 
@@ -645,7 +646,170 @@ const VegaInputRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-const vegaInputCss = ":host{cursor:text;display:block;text-align:left;line-height:normal}:host(.vega-input-inline-block){display:inline-block;width:100%}:host(.vega-input-hidden){display:none}vega-field-label{margin-bottom:8px}.vega-input-container{display:flex;align-items:center;border-radius:8px;gap:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}.vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.vega-input-container.vega-input-disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-container.vega-input-disabled:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-container.vega-input-disabled input{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}.vega-input-container.with-value{border-width:1px;border-style:solid;border-radius:8px}.vega-input-container:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}.vega-input-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.vega-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}.vega-input-container.error: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))}.vega-input-prefix{text-align:center;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-size:0px}.vega-input-prefix.vega-input-prefix-slot{height:24px;overflow:hidden}.vega-input-input{flex:1 1 0%;position:relative}.vega-input-input input{width:100%;outline:2px solid transparent;outline-offset:2px;border-style:none;height:24px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.vega-input-input input::placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}.vega-input-size-small{padding-top:8px;padding-right:12px;padding-bottom:8px;padding-left:12px}.vega-input-size-default{padding-top:12px;padding-right:16px;padding-bottom:12px;padding-left:16px}.vega-input-input input:disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.vega-hint{padding-top:12px;padding-right:8px;padding-left:8px}.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-hint>label{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){.vega-hint>label{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){.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.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){.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){.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){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none}.vega-input-clear-icon{width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-input-clear-icon.invisible{visibility:hidden}.vega-input-clear-icon vega-icon{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
+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);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The input container has a fixed suffix that adapts based on the container size.
+ * When the input container is large enough to fully display the input content, the suffix appears immediately after the input text.
+ *    this is achieved by setting the input to not grow flexibly while allowing the suffix to grow.
+ * If the container is too small to display all the input content, the suffix moves to the end of the container,
+ *    with the input width controlled by the vega-input component.
+ */
+class VegaInputCompactWidthController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    this.setInputAutoWidth();
+  }
+  /**
+   * While value changed, we should calculate input actual width
+   */
+  watchValue() {
+    this.setInputAutoWidth();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-suffix-text-change-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   *  While suffixText changed, we should calculate input actual width
+   */
+  watchSuffixText() {
+    this.setInputAutoWidth();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-compact-input-width-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Adjusts the width of the input based on its content and container size.
+   *    while actual width of value larger than input width, we use native vega-input to controller the stretch
+   *    otherwise, we should make the input container not flex grow,and the suffix flex grow.
+   */
+  setInputAutoWidth() {
+    const vegaInputContainer = this.host.shadowRoot.querySelector('.vega-input-container');
+    const inputBox = vegaInputContainer === null || vegaInputContainer === void 0 ? void 0 : vegaInputContainer.querySelector('.vega-input-input');
+    const input = inputBox === null || inputBox === void 0 ? void 0 : inputBox.querySelector('input');
+    if (!input)
+      return;
+    vegaInputContainer.classList.remove('auto-width');
+    input.style.removeProperty('width');
+    if (this.isCompactInputWidth && this.suffixText) {
+      const actualWidth = this.getActualInputWidth();
+      if (inputBox.getBoundingClientRect().width > actualWidth) {
+        input.style.width = `${actualWidth}px`;
+        vegaInputContainer.classList.add('auto-width');
+      }
+    }
+  }
+  /**
+   * Calculates the actual width of the text content.
+   *
+   * @returns {number} - The actual width of the text content.
+   */
+  getActualInputWidth() {
+    const container = this.getCalculateTextWidthContainer();
+    container.style.display = 'inline-block';
+    container.textContent = `${this.value || this.placeholder || ''}`;
+    const actualWidth = container.getBoundingClientRect().width;
+    container.style.display = 'none';
+    return actualWidth;
+  }
+  /**
+   * Creates and returns a hidden container element for calculating text width.
+   *
+   * @returns {HTMLElement} - calculating text width container.
+   */
+  getCalculateTextWidthContainer() {
+    if (!this.calculateTextWidthContainer) {
+      const container = document.createElement('div');
+      container.classList.add('v-font-field-value');
+      container.style.visibility = 'hidden';
+      container.style.display = 'none';
+      this.host.shadowRoot.append(container);
+      this.calculateTextWidthContainer = container;
+    }
+    return this.calculateTextWidthContainer;
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputCompactWidthController.prototype, "host", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputCompactWidthController.prototype, "value", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputCompactWidthController.prototype, "placeholder", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputCompactWidthController.prototype, "isCompactInputWidth", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputCompactWidthController.prototype, "suffixText", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaInputCompactWidthController.prototype, "componentDidLoad", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('watchValue')
+], VegaInputCompactWidthController.prototype, "watchValue", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('watchSuffixText')
+], VegaInputCompactWidthController.prototype, "watchSuffixText", null);
+
+var __decorate$1 = (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);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the vega input states from parent vega-input-numeric
+ * TODO: Should change to internal prop, https://gethired.atlassian.net/browse/VD-4986
+ */
+class VegaInputStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-input-numeric',
+      subStates: [
+        {
+          subStateName: 'prefixText',
+          parentStateName: 'prefixText',
+        },
+        {
+          subStateName: 'suffixText',
+          parentStateName: 'suffixText',
+        },
+        {
+          subStateName: 'isCompactInputWidth',
+          parentStateName: 'isCompactInputWidth',
+        },
+      ],
+    });
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputStateController.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaInputStateController.prototype, "prefixText", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaInputStateController.prototype, "suffixText", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaInputStateController.prototype, "isCompactInputWidth", void 0);
+
+const vegaInputCss = ":host{cursor:text;display:block;text-align:left;line-height:normal}:host(.vega-input-inline-block){display:inline-block;width:100%}:host(.vega-input-hidden){display:none}vega-field-label{margin-bottom:8px}.vega-input-container{display:flex;align-items:center;border-radius:8px;gap:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}.vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.vega-input-container.vega-input-disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-container.vega-input-disabled:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-container.vega-input-disabled input{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}.vega-input-container.with-value{border-width:1px;border-style:solid;border-radius:8px}.vega-input-container:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}.vega-input-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.vega-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}.vega-input-container.error: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))}.vega-input-prefix{text-align:center;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-size:0px}.vega-input-prefix.vega-input-prefix-slot{height:24px;overflow:hidden}.vega-input-input{flex:1 1 0%;position:relative}.vega-input-input input{width:100%;outline:2px solid transparent;outline-offset:2px;border-style:none;height:24px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.vega-input-input input::placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}.vega-input-size-small{padding-top:8px;padding-right:12px;padding-bottom:8px;padding-left:12px}.vega-input-size-default{padding-top:12px;padding-right:16px;padding-bottom:12px;padding-left:16px}.vega-input-input input:disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.vega-hint{padding-top:12px;padding-right:8px;padding-left:8px}.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-hint>label{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){.vega-hint>label{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){.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.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){.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){.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){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none}.vega-input-clear-icon{width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-input-clear-icon.invisible{visibility:hidden}.vega-input-clear-icon vega-icon{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.vega-input-container.compact-input-width{gap:0px}.vega-input-container.compact-input-width .vega-input-prefix{margin-right:8px}.vega-input-container.compact-input-width .prefix-text,.vega-input-container.compact-input-width .suffix-text{margin-right:2px}.vega-input-container.compact-input-width .vega-input-clear-icon{margin-left:2px}.vega-input-container.compact-input-width .vega-input-input input{padding:0px;min-width:1px}.vega-input-container.compact-input-width.auto-width .vega-input-input{flex-grow:0}.vega-input-container.compact-input-width.auto-width .suffix-text{flex-grow:1}.vega-input-container .prefix-text,.vega-input-container .suffix-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0;flex-grow:0}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-input-container .prefix-text,.vega-input-container .suffix-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-input-container .prefix-text,.vega-input-container .suffix-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-input-container .prefix-text,.vega-input-container .suffix-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.v-font-field-value{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.v-font-field-value{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.v-font-field-value{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.v-font-field-value{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}";
 
 var __decorate = (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;
@@ -706,7 +870,16 @@ const VegaInput = class {
       inputContainerGetter: () => this.inputContainerRef,
       touchableAreaGetter: () => [this.inputRef],
     });
+    this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer({
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-input-auto-width-e2e}
+       */
+      callback: /* istanbul ignore next */ () => this.compactWidthController.setInputAutoWidth(),
+    });
     this.copyPasteController = new VegaInputCopyPasteController();
+    this.compactWidthController = new VegaInputCompactWidthController();
+    this.stateController = new VegaInputStateController();
     this.maskConfigController = new VegaInputMaskConfigController();
     this.prefixSlotRenderer = new VegaInputPrefixSlotRenderer();
     this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInput, vegaEventId.VegaChange);
@@ -881,6 +1054,12 @@ const VegaInput = class {
         this.maskConfigController.setupStringFormatter(inputRef);
       }
     };
+    this.renderPrefixText = () => {
+      return this.prefixText && index.h("div", { class: "prefix-text" }, this.prefixText);
+    };
+    this.renderSuffixText = () => {
+      return this.suffixText && index.h("div", { class: "suffix-text" }, this.suffixText);
+    };
     this.handleInputFocus = (e) => {
       this.focusEventEmitter.emit(undefined, e);
     };
@@ -919,6 +1098,8 @@ const VegaInput = class {
       this.labelButtonClickEventEmitter.emit();
     };
   }
+  watchSuffixText() {
+  }
   /**
    * The input component is embedded in other components.
    *
@@ -986,7 +1167,9 @@ const VegaInput = class {
     }
     containerClass += this.size === 'small' ? ' vega-input-size-small' : ' vega-input-size-default';
     containerClass += this.disabled ? ' vega-input-disabled' : '';
-    return (index.h("div", { class: "vega-input", part: "container-wrapper" }, this.renderLabelDom(), index.h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: containerClass, onClick: this.focusInput, "aria-label": "input container", role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, this.prefixSlotRenderer.render(), this.containerDom(), this.showClearIcon && this.renderClearIcon()), this.renderHintDom()));
+    if (this.isCompactInputWidth)
+      containerClass += ' compact-input-width';
+    return (index.h("div", { class: "vega-input", part: "container-wrapper" }, this.renderLabelDom(), index.h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: containerClass, onClick: this.focusInput, "aria-label": "input container", "aria-disabled": `${this.disabled}`, role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, this.prefixSlotRenderer.render(), this.renderPrefixText(), this.containerDom(), this.renderSuffixText(), this.showClearIcon && this.renderClearIcon()), this.renderHintDom()));
   }
   renderLabelDom() {
     return (index.h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, ref: (node) => {
@@ -1004,6 +1187,7 @@ const VegaInput = class {
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
+    "suffixText": ["watchSuffixText"],
     "value": ["watchValue"],
     "validationRules": ["watchValidationRules"],
     "maskConfig": ["watchMaskChange"]
@@ -1015,9 +1199,18 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaInput.prototype, "formFieldController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "pageResizeObserverSlimmer", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaInput.prototype, "copyPasteController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "compactWidthController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "stateController", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaInput.prototype, "maskConfigController", void 0);

package/dist/cjs/{vega-internal-event-id-c98e9a7d.js → vega-internal-event-id-99cc22e1.js}

@@ -33,6 +33,7 @@ const VegaInternalTableRowSelectAll = new VegaInternalEventID('tableRowSelectAll
 const VegaInternalTableRowExpand = new VegaInternalEventID('tableRowExpand');
 const VegaDropdownRenderItemInternalOverridden = new VegaInternalEventID('dropdownRenderItemInternalOverridden');
 const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
+const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');
 
 exports.VegaDropdownRenderItemInternalOverridden = VegaDropdownRenderItemInternalOverridden;
 exports.VegaDropdownSearchInternalOverridden = VegaDropdownSearchInternalOverridden;
@@ -41,6 +42,7 @@ exports.VegaInternalCalendarMonthEventsChange = VegaInternalCalendarMonthEventsC
 exports.VegaInternalDropdownTemplateItemsChange = VegaInternalDropdownTemplateItemsChange;
 exports.VegaInternalFieldErrorStateChange = VegaInternalFieldErrorStateChange;
 exports.VegaInternalLeftNavLinkClick = VegaInternalLeftNavLinkClick;
+exports.VegaInternalSidenavLinkClick = VegaInternalSidenavLinkClick;
 exports.VegaInternalSubStatePull = VegaInternalSubStatePull;
 exports.VegaInternalSubStatePush = VegaInternalSubStatePush;
 exports.VegaInternalTableRowExpand = VegaInternalTableRowExpand;

package/dist/cjs/vega-item-toggle.cjs.entry.js

@@ -7,7 +7,7 @@ const component = require('./component-73a88c4e.js');
 const ui = require('./ui-32e69595.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
 const vegaEventId = require('./vega-event-id-e40ac8f0.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-fc729fd9.js');
@@ -15,7 +15,7 @@ require('./change-manager-a297e4d2.js');
 require('./observer-f49483e8.js');
 require('./ui-08f33116.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-627b1328.js');
+require('./internal-vega-event-manager-4d9a8e67.js');
 require('./object-bbd4ed7f.js');
 
 const VegaItemToggleRuntimeMetricsPayloadDefinition = [

package/dist/cjs/vega-left-nav_5.cjs.entry.js

@@ -10,33 +10,33 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-a8cf1874.js');
 const effect = require('./effect-37695d3d.js');
 const featureFlagController = require('./feature-flag-controller-078da332.js');
-const internalIconManager = require('./internal-icon-manager-858baff1.js');
-const internalVegaZIndexManager = require('./internal-vega-z-index-manager-23051df4.js');
+const internalIconManager = require('./internal-icon-manager-2ff58050.js');
+const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const breakpoints = require('./breakpoints-7e2dff90.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
 const vegaEventId = require('./vega-event-id-e40ac8f0.js');
 const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-6749808c.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
-const vegaInternalEventId = require('./vega-internal-event-id-c98e9a7d.js');
+const vegaInternalEventId = require('./vega-internal-event-id-99cc22e1.js');
 const chevronDown = require('./chevron-down-ca2fa88e.js');
-const staticSubjectTitle = require('./static-subject-title-3599787e.js');
+const staticSubjectTitle = require('./static-subject-title-471e1793.js');
 const observer = require('./observer-f49483e8.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const ui = require('./ui-08f33116.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-fc729fd9.js');
-const designToken = require('./design-token-17b8e4d8.js');
+const designToken = require('./design-token-92906579.js');
 require('./index-5792390b.js');
-require('./icon-manager-5a2b67cf.js');
-require('./create-public-api-runtime-metrics-slimmer-7510221b.js');
+require('./icon-manager-3787af39.js');
+require('./create-public-api-runtime-metrics-slimmer-5cc88124.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./number-459031f7.js');
+require('./number-4816603d.js');
 require('./ui-32e69595.js');
-require('./internal-vega-event-manager-627b1328.js');
+require('./internal-vega-event-manager-4d9a8e67.js');
 require('./object-bbd4ed7f.js');
 require('./type-guard-a07b353b.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsive-format-facade-7bc51a43.js');
+require('./responsive-format-facade-ad2f67bf.js');
 require('./pixel-98f2a10c.js');
 require('./state-background-color-formatter-418b84e6.js');
 

package/dist/cjs/vega-line-chart.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const legendInputProcessor = require('./legend-input-processor-6ab8782a.js');
-const yAxisInputProcessor = require('./y-axis-input-processor-cc6e9196.js');
-const array = require('./array-6e559cde.js');
+const legendInputProcessor = require('./legend-input-processor-d0b3f621.js');
+const yAxisInputProcessor = require('./y-axis-input-processor-a0df5e74.js');
+const array = require('./array-5adef7b2.js');
 const component = require('./component-73a88c4e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
 require('./typography-4560e7f1.js');
 require('./pixel-98f2a10c.js');
-require('./number-459031f7.js');
+require('./number-4816603d.js');
 
 function map(values, mapper) {
   if (typeof values[Symbol.iterator] !== "function") throw new TypeError("values is not iterable");

package/dist/cjs/vega-loader-wrapper_2.cjs.entry.js

@@ -7,14 +7,14 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
 const component = require('./component-73a88c4e.js');
 const ui = require('./ui-08f33116.js');
-const responsiveFormatFacade = require('./responsive-format-facade-7bc51a43.js');
+const responsiveFormatFacade = require('./responsive-format-facade-ad2f67bf.js');
 const breakpoints = require('./breakpoints-7e2dff90.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-a8cf1874.js');
 require('./type-guard-a07b353b.js');
 require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./number-459031f7.js');
+require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 
 const vegaLoaderWrapperCss = ":host{display:block;display:inline-flex;align-items:center;justify-content:center;top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(var(--v-bg-backdrop-loading, 255, 255, 255, 0.5))}:host(.absolute-wrapper){position:absolute}:host(.fixed-wrapper){width:100%;height:100%;position:fixed}";

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

@@ -4,25 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
-const number = require('./number-459031f7.js');
+const number = require('./number-4816603d.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
 const vegaEventId = require('./vega-event-id-e40ac8f0.js');
 const ui = require('./ui-08f33116.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e383a914.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-0245d631.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-const translationSlimmer = require('./translation-slimmer-83577cfd.js');
+const translationSlimmer = require('./translation-slimmer-32aa13e7.js');
 require('./change-manager-a297e4d2.js');
 require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-627b1328.js');
+require('./internal-vega-event-manager-4d9a8e67.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-078da332.js');
 require('./index-5792390b.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./translation-0dd74433.js');
-require('./static-subject-title-3599787e.js');
-require('./create-public-api-runtime-metrics-slimmer-7510221b.js');
+require('./translation-42c1b2c8.js');
+require('./static-subject-title-471e1793.js');
+require('./create-public-api-runtime-metrics-slimmer-5cc88124.js');
 
 const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, translationSlimmer, }) => {
   const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;

package/dist/cjs/vega-pie-chart.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const legendInputProcessor = require('./legend-input-processor-6ab8782a.js');
+const legendInputProcessor = require('./legend-input-processor-d0b3f621.js');
 const component = require('./component-73a88c4e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-require('./array-6e559cde.js');
-require('./number-459031f7.js');
+require('./array-5adef7b2.js');
+require('./number-4816603d.js');
 require('./typography-4560e7f1.js');
 require('./pixel-98f2a10c.js');
 

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

@@ -7,25 +7,25 @@ const component = require('./component-73a88c4e.js');
 const injectKeyboardManager = require('./inject-keyboard-manager-e79a1ade.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
 const vegaEventId = require('./vega-event-id-e40ac8f0.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-bf5ecbd8.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-2b251c0a.js');
 require('./keyboard-manager-34b78600.js');
 require('./ui-08f33116.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./change-manager-a297e4d2.js');
 require('./dom-node-subject-observer-factory-2e41340d.js');
 require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-627b1328.js');
+require('./internal-vega-event-manager-4d9a8e67.js');
 require('./ui-32e69595.js');
 require('./type-guard-a07b353b.js');
 require('./breakpoints-7e2dff90.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsive-format-facade-7bc51a43.js');
-require('./number-459031f7.js');
+require('./responsive-format-facade-ad2f67bf.js');
+require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
-require('./internal-vega-z-index-manager-23051df4.js');
+require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./page-resize-observer-slimmer-a8cf1874.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/cjs/vega-progress-tracker.cjs.entry.js

@@ -7,16 +7,16 @@ const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-facto
 const vegaEventId = require('./vega-event-id-e40ac8f0.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const component = require('./component-73a88c4e.js');
-const number = require('./number-459031f7.js');
+const number = require('./number-4816603d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-fc729fd9.js');
 require('./change-manager-a297e4d2.js');
 require('./observer-f49483e8.js');
 require('./ui-08f33116.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-627b1328.js');
+require('./internal-vega-event-manager-4d9a8e67.js');
 require('./object-bbd4ed7f.js');
 
 const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [