@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

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

@@ -0,0 +1,693 @@
+import { h, F as Fragment, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { h as VegaChange } from './vega-event-id-61c8bd9f.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-316ebdb1.js';
+import { i as isArrayEqual } from './array-a1d98264.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
+import { g as getDeviceType, D as DeviceType } from './ui-5f775fd9.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { I as InputRangeRequiredRule } from './input-range-required-rule-3ad74776.js';
+import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './dom-node-subject-factory-5798693b.js';
+import './internal-vega-event-manager-826279b7.js';
+import './try-get-document-bef0f526.js';
+import './string-a953eafc.js';
+import './observer-3959f9dd.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './vega-internal-event-id-b65a01a3.js';
+import './index-81ce67e2.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './ui-189dae23.js';
+import './breakpoints-d9faf11c.js';
+import './mutation-observer-slimmer-7065c745.js';
+import './mutation-observer-filters-6c515793.js';
+import './sub-state-observer-slimmer-4fc8b3da.js';
+import './number-4398f2e1.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-24b9f956.js';
+import './index-1f9eab8f.js';
+import './_commonjsHelpers-2088bffa.js';
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The class VegaInputRangeRenderer is a TypeScript React component that renders an input range field with custom label, hint, and styling options. */
+class VegaInputRangeRenderer extends VegaSlimmer {
+  /**
+   * This function returns the reference to the input range container element in a TypeScript React component.
+   *
+   * @returns {HTMLElement} An HTMLElement, specifically the inputRangeContainerRef.
+   */
+  getInputRangeContainerRef() {
+    return this.inputRangeContainerRef;
+  }
+  /**
+   * The render function returns a JSX structure that includes a vega-flex container with a vega-field-label and an input range input renderer.
+   *
+   * @returns {HTMLElement} An HTMLElement is being returned. The code snippet is a render method of a component that
+   * returns a structure containing a vega-flex element with various attributes and child elements,
+   * including a vega-field-label and the result of calling the render method of
+   * inputRangeInputRenderer. Additionally, the renderHintDom method is being called and its result is
+   * included in the returned structure.
+   */
+  render() {
+    return (h(Fragment, null,
+      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) },
+        h("vega-field-label", { onClick: this.inputRangeInputRenderer.focusFirstInput, isFieldRequired: this.required, disabled: this.disabled, label: this.label }),
+        this.inputRangeInputRenderer.render()),
+      this.renderHintDom()));
+  }
+  /**
+   * The function `renderHintDom` returns a label element with a hint text if the `hint` property is provided.
+   *
+   * @returns {Nullable<HTMLElement>} A `label` element with the class `vega-input-range-hint` containing a `vega-font` element
+   * with the variant `font-footnote1-short` and color `text-secondary`, displaying the hint text stored
+   * in the `this.hint` property.
+   */
+  renderHintDom() {
+    if (this.hint) {
+      return (h("label", { class: "vega-input-range-hint" },
+        h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" }, this.hint)));
+    }
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "required", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "disabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "label", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "hint", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "stack", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "inputRangeInputRenderer", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaInputRangeValueController` class in TypeScript manages the value and events of an input range component. */
+class VegaInputRangeValueController extends VegaSlimmer {
+  /**
+   * This function emits an event and notifies after a value change if the new value is different from the old value.
+   *
+   * @param {InputRangeValueType} newValue - The `newValue` parameter represents the new value of an input range element.
+   * @param {InputRangeValueType} oldValue - The `oldValue` parameter represents the previous value of an input range element before it was changed.
+   */
+  emitEventAndNotifyAfterValueChange(newValue, oldValue) {
+    if (!isArrayEqual(newValue, oldValue)) {
+      this.changeEventEmitter.emit(newValue);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, { host: this.host, detail: newValue });
+    }
+  }
+  /**
+   * The function `updateValueByRangeIndex` updates the value of an array based on the specified index.
+   *
+   * @param {string} itemValue - The `itemValue` parameter is a string representing the value that will be updated in the range input.
+   * @param {RangeInputIndexType} index - The `index` parameter in the `updateValueByRangeIndex` function is used to determine which element in the array `this.value` should be updated.
+   */
+  updateValueByRangeIndex(itemValue, index) {
+    let newValue = this.value;
+    if (index === 0) {
+      newValue = [
+        itemValue,
+        Array.isArray(this.value) && !isNaN(Number(this.value[1])) ? this.value[1] : '',
+      ];
+    }
+    else {
+      newValue = [
+        Array.isArray(this.value) && !isNaN(Number(this.value[0])) ? this.value[0] : '',
+        itemValue,
+      ];
+    }
+    if (!isArrayEqual(newValue, this.value)) {
+      this.setValue(newValue);
+    }
+  }
+  /**
+   * The function `setValue` sets the value of an input range component in TypeScript.
+   *
+   * @param {InputRangeValueType} value - The `value` parameter in the `setValue` method is of type `InputRangeValueType`.
+   */
+  setValue(value) {
+    if (this.valueGuard(value)) {
+      this.value = value;
+    }
+  }
+  /**
+   * The function `valueGuard` checks if the input value is an array with exactly two elements, where each element is either a string or a number.
+   *
+   * @param {InputRangeValueType} value - The `value` parameter is expected to be an array with a length
+   * of 2, where each element in the array is either a string or a number. The `valueGuard` function
+   * returns `true` if these conditions are met, and `false` otherwise.
+   * @returns {boolean} The `valueGuard` function is returning a boolean value. It checks if the `value` parameter
+   * is an array with a length of 2, and if every item in the array is either a string or a number. If
+   * these conditions are met, the function returns `true`, otherwise it returns `false`.
+   */
+  valueGuard(value) {
+    return Array.isArray(value) && value.length === 2;
+  }
+}
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaInputRangeValueController.prototype, "value", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaInputRangeValueController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaInputRangeValueController.prototype, "changeEventEmitter", void 0);
+__decorate$3([
+  MapToComponentMethod('watchValue')
+], VegaInputRangeValueController.prototype, "emitEventAndNotifyAfterValueChange", null);
+
+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 `VegaInputRangeInputRenderer` class is a TypeScript React component used to render an input range with two fields for minimum and maximum values. */
+class VegaInputRangeInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-range-label-click}
+     */
+    /* istanbul ignore next */
+    this.focusFirstInput = () => {
+      void this.minFieldInputRef.doFocus();
+    };
+    /**
+     * update the component value when the range input value change
+     *
+     * @param {NotifyObserverPayload<string>} payload the input value and the input element object
+     */
+    this.inputValueChange = (payload) => {
+      const rangeIndex = payload.host.dataset.index === '0' ? 0 : 1;
+      this.valueController.updateValueByRangeIndex(payload.detail, rangeIndex);
+    };
+  }
+  /**
+   * The function `getInputRefByIndex` returns the HTML input element reference based on the index provided.
+   *
+   * @param {RangeInputIndexType} index - The `index` parameter in the `getInputRefByIndex` function is
+   * of type `RangeInputIndexType`. This type is used to specify whether the index refers to the minimum
+   * or maximum input field in a range input element.
+   * @returns {HTMLVegaInputElement} The `getInputRefByIndex` function returns either the `minFieldInputRef` or
+   * `maxFieldInputRef` based on the `index` provided.
+   */
+  getInputRefByIndex(index) {
+    return [this.minFieldInputRef, this.maxFieldInputRef][index];
+  }
+  /** 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 (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' },
+      h("vega-flex", { "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
+        h("vega-input", Object.assign({ prefixIcon: this.prefixIcon }, this.getInputPropsByRangeIndex(0), { ref: (input) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, VegaChange, this.inputValueChange);
+            this.minFieldInputRef = input;
+          } })),
+        h("span", { class: "vega-input-range-divider" }),
+        h("vega-input", Object.assign({ class: {
+            'with-left-padding-in-mobile': !!this.prefixIcon && this.isMobileDevice,
+          } }, this.getInputPropsByRangeIndex(1), { ref: (input) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, VegaChange, this.inputValueChange);
+            this.maxFieldInputRef = input;
+          } }))),
+      this.clearIconRenderer.render()));
+  }
+  /**
+   * Get the input props object by range index
+   *
+   * @param {number} index the range index
+   * @returns {InputPropsType} the input props object
+   */
+  getInputPropsByRangeIndex(index) {
+    return {
+      'type': 'number',
+      'data-index': index,
+      'placeholder': this.getPlaceholderByIndex(index),
+      'showClearIcon': false,
+      'disabled': this.disabled,
+      'size': this.size,
+      'min': this.min,
+      'max': this.max,
+      'value': this.getDefaultValueByIndex(index),
+    };
+  }
+  /**
+   * get the input placeholder text by the input range index
+   *
+   * @param {number} index the range index 0|1
+   * @returns {string} the input placeholder text
+   */
+  getPlaceholderByIndex(index) {
+    const placeholder = this.placeholder || VegaInputRangeInputRenderer.defaultPlaceholder;
+    return this.translationSlimmer.t(placeholder[index]);
+  }
+  /**
+   * get the input value by the input range index
+   *
+   * @param {number} index 0|1
+   * @returns {string} the input value
+   */
+  getDefaultValueByIndex(index) {
+    const value = this.value || ['', ''];
+    return value[index];
+  }
+}
+VegaInputRangeInputRenderer.defaultPlaceholder = ['Minimum', 'Maximum'];
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "value", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "prefixIcon", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "disabled", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "min", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "max", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "size", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "showClearIcon", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "valueController", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "clearIconRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "translationSlimmer", void 0);
+
+/**
+ * A rule that checks if number is in min and max range
+ */
+class InputRangeMinAndMaxRule extends InternalFormFieldValidationRule {
+  /**
+   * It creates a new instance of the class with the given config.
+   *
+   * @param {{ minValue: number; maxValue: number }} config - config including the minDate and the maxDate
+   * @param {string} config.minValue - The min number
+   * @param {string} config.maxValue - The max number
+   */
+  constructor(config) {
+    super();
+    /**
+     * Generate an invalid result
+     *
+     * @param {string} message Error message
+     * @returns {EvaluateResultTranslation} invalid validation result
+     */
+    this.invalidResult = (message) => ({
+      isValid: false,
+      message,
+    });
+    /**
+     * Generate a valid result
+     *
+     * @returns {EvaluateResultTranslation} invalid validation result
+     */
+    this.validResult = () => ({
+      isValid: true,
+      message: '',
+    });
+    this.minValue = config.minValue === 0 || config.minValue ? Number(config.minValue) : null;
+    this.maxValue = config.maxValue === 0 || config.maxValue ? Number(config.maxValue) : null;
+  }
+  /**
+   * 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);
+  }
+  /**
+   * check if the start value is within the min and max range, and if the end value is within the
+   * max range
+   *
+   * @param {string[]} input - The value of the input range.
+   * @returns  {EvaluateResultTranslation} - The result of the evaluation.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Unexpected type of input: ${typeof input}: ${input}`);
+    }
+    const startValue = Number(input[0]), endValue = Number(input[1]);
+    if (this.minValue !== null &&
+      ((input[0] !== '' && startValue < this.minValue) || (input[1] !== '' && endValue < this.minValue))) {
+      return this.invalidResult({ key: 'The minimum input value is {0}', args: [this.minValue] });
+    }
+    if (this.maxValue !== null &&
+      ((input[0] !== '' && startValue > this.maxValue) || (input[1] !== '' && endValue > this.maxValue))) {
+      return this.invalidResult({ key: 'The maximum input value is {0}', args: [this.maxValue] });
+    }
+    if (input[0] !== '' && input[1] !== '' && startValue > endValue) {
+      return this.invalidResult(`The end value should be greater than the start value`);
+    }
+    return this.validResult();
+  }
+  /**
+   * 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);
+  }
+  /**
+   * It returns true if the input is a string or an array of two strings, and each string is a valid string
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    return (Array.isArray(input) &&
+      input.length === 2 &&
+      input.every((item) => typeof Number(item) === 'number'));
+  }
+}
+
+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;
+};
+class VegaInputRangeClearIconRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Set the component value to empty and focus on the first input element
+     */
+    this.clearInputRangeValue = () => {
+      this.valueController.setValue(['', '']);
+      this.inputRangeInputRenderer.focusFirstInput();
+    };
+  }
+  /**
+   * This function renders a clear icon element for an input range with specific styling and event handlers.
+   *
+   * @returns {HTMLElement} the clear button
+   */
+  render() {
+    return (h("div", { class: {
+        'vega-input-range-clear-icon': true,
+        'invisible': !this.shouldShowClearIcon(),
+      }, "aria-label": "clear input range", role: "button", tabindex: !this.disabled ? 0 : -1, onClick: this.clearInputRangeValue, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "close" })));
+  }
+  /**
+   * It is responsible for determining whether the clear icon should be displayed based on certain conditions.
+   *
+   * @returns {boolean} boolean result
+   */
+  shouldShowClearIcon() {
+    return (this.showClearIcon &&
+      !this.disabled &&
+      Array.isArray(this.value) &&
+      this.value.some((item) => !!item));
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaInputRangeClearIconRenderer.prototype, "showClearIcon", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaInputRangeClearIconRenderer.prototype, "value", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaInputRangeClearIconRenderer.prototype, "disabled", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaInputRangeClearIconRenderer.prototype, "inputRangeInputRenderer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaInputRangeClearIconRenderer.prototype, "valueController", void 0);
+
+const vegaInputRangeCss = ":host{display:inline-block;width:100%}.vega-input-range-input-container{position:relative;width:100%;flex:1 1 0%;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));box-sizing:border-box;min-width:50%}.vega-input-range-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.vega-input-range-input-container .vega-input-range-divider{display:inline-block;width:0px;height:24px;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));border-style:solid;border-right-width:1px;border-left-width:0px;flex-shrink:0}.vega-input-range-input-container:focus-within .vega-input-range-divider{opacity:0}.vega-input-range-input-container .vega-input-range-clear-icon{position:absolute;width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));top:50%;right:16px;transform:translateY(-50%);z-index:2}.vega-input-range-input-container .vega-input-range-clear-icon.invisible{visibility:hidden}.vega-input-range-input-container .vega-input-range-clear-icon:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border-radius:4px;padding:2px}.vega-input-range-input-container vega-input::part(input-container){border-width:0px}.vega-input-range-input-container vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));position:relative;box-shadow:0 0 0;margin:-1px;z-index:1}.vega-input-range-input-container.input-range-with-clear-icon vega-input:last-child::part(input){padding-right:24px}.vega-input-range-input-container.input-range-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-range-input-container.input-range-disabled:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-range-input-container.input-range-disabled .vega-input-range-divider{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))}.vega-input-range-input-container.input-range-mobile .vega-input-range-divider{width:100%;height:0px;border-right-width:0px;border-left-width:0px;border-top-width:0px;border-bottom-width:1px}.vega-input-range-input-container.input-range-mobile:focus-within .vega-input-range-divider{opacity:1}.vega-input-range-input-container.input-range-mobile .with-left-padding-in-mobile::part(input){padding-left:26px}.vega-input-range-input-container.input-range-mobile .vega-input-range-clear-icon{top:25%}.vega-input-range-input-container.input-range-mobile.input-range-with-clear-icon vega-input:first-child::part(input){padding-right:24px}.vega-input-range-input-container.input-range-mobile.input-range-with-clear-icon vega-input:last-child::part(input){padding-right:2px}.vega-input-range-container.error .vega-input-range-input-container{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.vega-input-range-container.error .vega-input-range-input-container:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}.vega-input-range-container.error .vega-input-range-input-container .vega-input-range-clear-icon:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.vega-input-range-container.error vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}.vega-input-range-hint{display:inline-block;padding-top:12px;padding-right:8px;padding-left:8px}.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}";
+
+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;
+  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;
+};
+const VegaInputRange = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new InputRangeRequiredRule() : null),
+        },
+        {
+          propertyName: 'min',
+          ruleFactory: (min, max) => new InputRangeMinAndMaxRule({ minValue: min, maxValue: max }),
+          dependence: 'max',
+        },
+        {
+          propertyName: 'max',
+          ruleFactory: (max, min) => new InputRangeMinAndMaxRule({ minValue: min, maxValue: max }),
+          dependence: 'min',
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: ['', ''],
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputRangeRenderer.getInputRangeContainerRef(),
+      touchableAreaGetter: () => [
+        this.inputRangeInputRenderer.getInputRefByIndex(0),
+        this.inputRangeInputRenderer.getInputRefByIndex(1),
+      ],
+    });
+    this.inputRangeInputRenderer = new VegaInputRangeInputRenderer();
+    this.clearIconRenderer = new VegaInputRangeClearIconRenderer();
+    this.inputRangeRenderer = new VegaInputRangeRenderer();
+    this.valueController = new VegaInputRangeValueController();
+    this.inputChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.inputRangeRenderer.getInputRangeContainerRef());
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInputRange, VegaChange);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Specifies the label or title for the input range.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the input field.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.label = '';
+    /**
+     * Represents a pre-set or default value for the input field.
+     *
+     * It allows you to initialize the field with a specific value,
+     *    which is displayed to the user when the input is
+     *    initially rendered.
+     *
+     * If the value is too long, it may be truncated with
+     *    an ellipsis for visual presentation.
+     *
+     * @vegaVersion 2.2.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = ['', ''];
+    /**
+     * Determines whether the clear icon should be displayed.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.showClearIcon = true;
+    /**
+     * Sets the minimum allowable numeric value for the input value.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.min = null;
+    /**
+     * Sets the maximum allowable numeric value for the input value.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.max = null;
+    /**
+     * Determines whether the input range is required.
+     *
+     * @vegaVersion 2.2.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Indicates whether the current value in the field is considered valid
+     *    based on the defined validation rules.
+     *
+     * @vegaVersion 2.2.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the input field should undergo automatic validation
+     *    during the user's input.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the input field.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.validationRules = [];
+    /**
+     * Defines the size of the input range,
+     *    specifying its width or length.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.size = 'default';
+    /**
+     * Specifies a placeholder string that displays as a temporary hint
+     *    or example inside the input field.
+     *
+     * It indicates the expected format or pattern of the input.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.placeholder = ['Minimum', 'Maximum'];
+    /**
+     * Determines whether the input range is disabled.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.disabled = false;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.hint = '';
+    /**
+     * Determines the arrangement and appearance of
+     *    the label and input areas.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.stack = 'vertical';
+  }
+  /**
+   * The input range component is embedded in other components.
+   *
+   * If modifying the input value does not meet the requirements
+   *    of other components, such as limiting the maximum value, etc.,
+   *    you need to modify the value of the input range component and
+   *    display it in real time.
+   *
+   * Since the value of `inputRef` retains the old value,
+   *    it needs to be updated manually when a value changes.
+   *
+   * @param {InputRangeValueType} newValue - The `newValue` parameter represents the new value of the input range.
+   * @param {InputRangeValueType} oldValue - The `oldValue` parameter represents the previous value of the input range before it was changed to the `newValue`.
+   */
+  watchValue(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { disabled: this.disabled } }, this.inputRangeRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInputRange.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "inputRangeInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "clearIconRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "inputRangeRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "inputChangeEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputRange.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaInputRange.style = vegaInputRangeCss;
+
+export { VegaInputRange as vega_input_range };