import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-090d31ca.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
import { c as createEventEmitSlimmer } from './event-emit-slimmer-697ad0b7.js';
import { i as VegaChange } from './vega-event-id-578c6c6d.js';
import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9e70a18d.js';
import { i as isArrayEqual } from './array-7888f339.js';
import { C as ChangeManager } from './change-manager-6a7eb88c.js';
import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
import { g as getDeviceType, D as DeviceType } from './ui-64815a12.js';
import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3897e95b.js';
import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2fcba81b.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-524cabd2.js';
import { T as TranslationSlimmer } from './translation-slimmer-32353a1c.js';
import './dynamic-slimmer-90b8af32.js';
import './internal-vega-event-manager-1ac5ee9a.js';
import './try-get-document-bef0f526.js';
import './string-a953eafc.js';
import './observer-3959f9dd.js';
import './misc-9fdbcfbb.js';
import './vega-internal-event-id-913e8be6.js';
import './internal-translation-controller-d8217d93.js';
import './index-3b327f29.js';
import './page-resize-observer-slimmer-e24d36c5.js';
import './breakpoints-332702ed.js';
import './ui-93922c59.js';
import './breakpoints-d9faf11c.js';
import './mutation-observer-slimmer-58ebc13c.js';
import './mutation-observer-filters-1a054fb0.js';
import './sub-state-observer-slimmer-81538a8c.js';
import './number-4398f2e1.js';
import './vega-env-manager-8f8dc473.js';
import './feature-flag-controller-30f7b625.js';
import './index-bfc6dfa2.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),
      'data-aria-label': this.getDataAriaLabel(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 data aria label for the input range input by the input range index
   *
   * @param {number} index the range index 0|1
   * @returns {string} the data aria label for the input range input
   */
  // TODO: should guarantee all the a11y label is integrated with our translation api, https://gethired.atlassian.net/browse/VD-8327
  getDataAriaLabel(index) {
    const inputRangeLabel = this.label || 'Input range';
    return `${inputRangeLabel} ${index === 0 ? 'start' : 'end'}`;
  }
  /**
   * 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, "label", 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) {
  }
  watchValidationRules() {
  }
  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 };
