import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-090d31ca.js';
import { M as MinNumberRule, a as MaxNumberRule } from './min-number-rule-2f1cfbf9.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { c as convertToNumber, n as normalizeNumberByRanger } from './number-4398f2e1.js';
import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9e70a18d.js';
import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2fcba81b.js';
import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3897e95b.js';
import { i as VegaChange, I as VegaBlur, a as VegaClick } from './vega-event-id-578c6c6d.js';
import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
import { C as ChangeManager } from './change-manager-6a7eb88c.js';
import { c as createEventEmitSlimmer } from './event-emit-slimmer-697ad0b7.js';
import { a as arrayToClassString } from './ui-64815a12.js';
import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
import './string-a953eafc.js';
import './observer-3959f9dd.js';
import './misc-9fdbcfbb.js';
import './dynamic-slimmer-90b8af32.js';
import './vega-internal-event-id-913e8be6.js';
import './internal-translation-controller-d8217d93.js';
import './index-3b327f29.js';
import './try-get-document-bef0f526.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 './array-7888f339.js';
import './sub-state-observer-slimmer-81538a8c.js';
import './internal-vega-event-manager-1ac5ee9a.js';
import './vega-env-manager-8f8dc473.js';
import './feature-flag-controller-30f7b625.js';
import './index-bfc6dfa2.js';

const VegaStepperRuntimeMetricsPayloadDefinition = [
  {
    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
    payloadDescription: 'Determines whether automatic validation should be implemented for the stepper component',
    /**
     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
     * If it is, the function will return `true`.
     *
     * @param {HTMLElement} host - The element to check
     * @returns {boolean} A boolean value
     */
    payloadValue: (host) => host.autoValidation === true,
  },
  {
    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
    payloadDescription: 'Determines whether automatic validation should be implemented for the stepper component',
    /**
     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
     * If it is, the function will return `true`.
     *
     * @param {HTMLElement} host - The element to check
     * @returns {boolean} A boolean value
     */
    payloadValue: (host) => host.autoValidation === false,
  },
  {
    payloadKey: 'BUTTON_VARIANT_IS_PRIMARY',
    payloadDescription: 'Specifies the style variant for the stepper buttons.',
    /**
     * The function checks if the `buttonVariant` property of the `host` element is equal to 'primary'.
     * If it is, the function will return `true`.
     *
     * @param {HTMLElement} host - The element to check
     * @returns {boolean} A boolean value
     */
    payloadValue: (host) => host.buttonVariant === 'primary',
  },
  {
    payloadKey: 'BUTTON_VARIANT_IS_SECONDARY',
    payloadDescription: 'Specifies the style variant for the stepper buttons.',
    /**
     * The function checks if the `buttonVariant` property of the `host` element is equal to 'secondary'.
     * If it is, the function will return `true`.
     *
     * @param {HTMLElement} host - The element to check
     * @returns {boolean} A boolean value
     */
    payloadValue: (host) => host.buttonVariant === 'secondary',
  },
];

const vegaStepperCss = ":host{display:inline-block;line-height:normal}:host>label{display:block;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host>div{display:inline-flex;justify-content:center;align-items:center}:host>label+div{margin-top:8px}:host div.vega-stepper-container-edited vega-input::part(container-wrapper){padding-left:0px;padding-right:0px}:host(.disabled) vega-input::part(input-container){text-align:center;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));padding:0px;border:0;box-shadow:unset}:host(.disabled) vega-input::part(input-container):hover{border:0}:host(.disabled) vega-input::part(input){background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));color:rgba(var(--v-text-primary, 32, 54, 69, 1));border:0}:host vega-input::part(input){width:48px;text-align:center;-moz-appearance:textfield}:host vega-input::part(input)::-webkit-inner-spin-button{-webkit-appearance:none}:host vega-input::part(input)::-webkit-outer-spin-button{-webkit-appearance:none}:host vega-input::part(error){display:none}:host vega-input::part(container-wrapper){padding-left:8px;padding-right:8px}:host .vega-error{display:none}:host .vega-stepper-container.error vega-input::part(input-container){border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-stepper-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-stepper-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))}.aria-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";

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 VegaStepper = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.vegaChange = createEvent(this, "vegaChange", 7);
    this.change = createEvent(this, "change", 7);
    this.globalSlimmers = {};
    this.formFieldController = new FormFieldControllerSlimmer({
      propertyRules: [
        {
          propertyName: 'min',
          ruleFactory: (min) => typeof min === 'number' ? new MinNumberRule({ minValue: min }) : null,
        },
        {
          propertyName: 'max',
          ruleFactory: (max) => typeof max === 'number' ? new MaxNumberRule({ maxValue: max }) : null,
        },
      ],
      defaultValue: 0,
      attributeGetter: (propertyName) => this[propertyName],
      touchableAreaGetter: () => this.touchableAreaGetter(),
      inputContainerGetter: () => this.stepperContainerRef,
    });
    this.changeEventEmitter = createEventEmitSlimmer(VegaStepper, VegaChange);
    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaBlur, VegaChange], () => this.stepperContainerRef);
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaStepperRuntimeMetricsPayloadDefinition);
    /**
     * Defines the upper limit or maximum value that can be
     *    incremented within the stepper component.
     *
     * @vegaVersion 1.0.5
     */
    this.max = 9999;
    /**
     * Defines the lower limit or minimum value that can be
     *    decremented within the stepper component.
     *
     * @vegaVersion 1.0.5
     */
    this.min = 0;
    /**
     * Defines the initial or current value of the stepper component.
     *
     * @vegaVersion 1.0.5
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.value = 0;
    /**
     * Provides a descriptive text or string that serves
     *    as the label or title for the stepper component.
     *
     * @vegaVersion 1.0.5
     */
    this.label = '';
    /**
     * Specifies whether the input field of the
     *    stepper component is disabled. The increment and
     *    decrement buttons are unaffected by this setting.
     *
     * @vegaVersion 1.31.0
     */
    this.inputDisabled = null;
    /**
     * Specifies whether the stepper component is disabled.
     *
     * @vegaVersion 1.3.0
     */
    this.disabled = false;
    /**
     * Specifies the validation status of the stepper component.
     *
     * @vegaVersion 1.3.0
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.isValid = null;
    /**
     * Determines whether automatic validation should be
     *    implemented for the stepper component.
     *
     * @vegaVersion 1.18.0
     */
    this.autoValidation = true;
    /**
     * Specifies the style variant for the stepper buttons.
     *
     * @vegaVersion 1.19.0
     */
    this.buttonVariant = 'primary';
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-stepper-on-decrease-e2e}
     */
    /* istanbul ignore next */
    this.onDecrease = () => {
      if (this.value > this.max) {
        this.value = this.max;
      }
      else if (this.value > this.min) {
        this.value -= 1;
      }
    };
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-stepper-on-increase-e2e}
     */
    /* istanbul ignore next */
    this.onIncrease = () => {
      if (this.value < this.max) {
        this.value += 1;
      }
    };
    /**
     * The input value needs to be within the range of Max and Min,
     * and the value of the input component needs to be modified in cascade.
     *
     * The below method is e2e-test covered in
     * @see{module:vega-stepper-change-e2e}
     */
    /* istanbul ignore next */
    this.onChildInputChange = (e) => {
      if (e.detail !== '') {
        this.value = convertToNumber(e.detail);
      }
    };
    /**
     * The value will be set to min if the input value is empty
     */
    this.handleInputBlur = (e) => {
      if (e.host.value === '') {
        this.value = this.min;
      }
    };
    this.touchableAreaGetter = () => Array.from(this.inputRef.shadowRoot.querySelectorAll('input'));
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-stepper-change-e2e}
   */
  /* istanbul ignore next */
  watchValue() {
    const inputValue = normalizeNumberByRanger(convertToNumber(this.value, 0), this.min, this.max);
    this.value = inputValue;
    // Modify the value of vega-input and set it to exceed max twice.
    // At this time, the value of stepper becomes the value of max twice,
    // but the value of vega-input has not changed, and needs to be modified manually.
    this.inputRef.value = inputValue.toString();
    this.changeEventEmitter.emit(this.value);
    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
      host: this.host,
      detail: this.value,
    });
  }
  render() {
    return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
        'vega-flex-shrink-0',
        this.inputDisabled || this.disabled ? 'disabled' : '',
      ]) }, this.renderLabelDom(), h("div", { class: {
        'vega-stepper-container': true,
        'vega-stepper-container-edited': this.inputDisabled,
      }, ref: (node) => (this.stepperContainerRef = node) }, h("vega-button-circle", { label: "Decrease", showTooltip: false, icon: "minus-sign", ref: (ref) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => this.onDecrease());
      }, disabled: this.value <= this.min || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' }), h("vega-input", { size: "small", type: "number", max: this.max, min: this.min, value: `${this.value}`, disabled: this.inputDisabled || this.disabled, showClearIcon: false, ref: (el) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaBlur, (input) => this.handleInputBlur(input));
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaChange, (input) => this.onChildInputChange(input));
        return (this.inputRef = el);
      }, "data-aria-label": this.label || 'stepper' }), h("vega-button-circle", { label: "Increase", showTooltip: false, ref: (ref) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => this.onIncrease());
      }, icon: "plus-sign", disabled: this.value >= this.max || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' })), h("div", { class: "aria-announcement", "aria-live": "polite", "aria-atomic": "true" }, `${this.label || 'stepper'}: ${this.value}`)), this.host);
  }
  renderLabelDom() {
    return this.label ? (h("label", { class: "v-text-center v-text-medium-typeset-1", htmlFor: this.stepperId }, this.label)) : null;
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "value": ["watchValue"]
  }; }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaStepper.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaStepper.prototype, "formFieldController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaStepper.prototype, "changeEventEmitter", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaStepper.prototype, "inputEventPrevent", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaStepper.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaStepper.style = vegaStepperCss;

export { VegaStepper as vega_stepper };
