'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-58ea899e.js');
const minNumberRule = require('./min-number-rule-dc555309.js');
const component = require('./component-1e352960.js');
const number = require('./number-4816603d.js');
const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
const formFieldControllerSlimmer = require('./form-field-controller-slimmer-44091874.js');
const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-b7498e5a.js');
const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
const vegaEventId = require('./vega-event-id-f95480b7.js');
const staticSubjectTitle = require('./static-subject-title-5829a298.js');
const changeManager = require('./change-manager-a297e4d2.js');
const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
const ui = require('./ui-3727d685.js');
require('./internal-form-field-validation-rule.abstract-07cdff46.js');
require('./string-39438062.js');
require('./observer-f49483e8.js');
require('./misc-3d30df91.js');
require('./dynamic-slimmer-f31fdfd7.js');
require('./vega-internal-event-id-e138d4d6.js');
require('./internal-translation-controller-f0da24b2.js');
require('./index-592b4052.js');
require('./try-get-document-c0ebd39a.js');
require('./page-resize-observer-slimmer-273d62ef.js');
require('./breakpoints-1cc2c4c6.js');
require('./ui-32120990.js');
require('./breakpoints-ebde4837.js');
require('./mutation-observer-slimmer-749d5020.js');
require('./mutation-observer-filters-38cebc6d.js');
require('./array-249289f2.js');
require('./sub-state-observer-slimmer-aa93ab4f.js');
require('./internal-vega-event-manager-063c17cb.js');
require('./vega-env-manager-23b8b23c.js');
require('./feature-flag-controller-5fa21654.js');
require('./index-3ca118c4.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) {
    index.registerInstance(this, hostRef);
    this.vegaChange = index.createEvent(this, "vegaChange", 7);
    this.change = index.createEvent(this, "change", 7);
    this.globalSlimmers = {};
    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
      propertyRules: [
        {
          propertyName: 'min',
          ruleFactory: (min) => typeof min === 'number' ? new minNumberRule.MinNumberRule({ minValue: min }) : null,
        },
        {
          propertyName: 'max',
          ruleFactory: (max) => typeof max === 'number' ? new minNumberRule.MaxNumberRule({ maxValue: max }) : null,
        },
      ],
      defaultValue: 0,
      attributeGetter: (propertyName) => this[propertyName],
      touchableAreaGetter: () => this.touchableAreaGetter(),
      inputContainerGetter: () => this.stepperContainerRef,
    });
    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaStepper, vegaEventId.VegaChange);
    this.inputEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaBlur, vegaEventId.VegaChange], () => this.stepperContainerRef);
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.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 = number.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 = number.normalizeNumberByRanger(number.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.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
      host: this.host,
      detail: this.value,
    });
  }
  render() {
    return component.sanitizeVegaComponent(index.h(index.Host, { class: ui.arrayToClassString([
        'vega-flex-shrink-0',
        this.inputDisabled || this.disabled ? 'disabled' : '',
      ]) }, this.renderLabelDom(), index.h("div", { class: {
        'vega-stepper-container': true,
        'vega-stepper-container-edited': this.inputDisabled,
      }, ref: (node) => (this.stepperContainerRef = node) }, index.h("vega-button-circle", { label: "Decrease", showTooltip: false, icon: "minus-sign", ref: (ref) => {
        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => this.onDecrease());
      }, disabled: this.value <= this.min || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' }), index.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, vegaEventId.VegaBlur, (input) => this.handleInputBlur(input));
        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, vegaEventId.VegaChange, (input) => this.onChildInputChange(input));
        return (this.inputRef = el);
      }, "data-aria-label": this.label || 'stepper' }), index.h("vega-button-circle", { label: "Increase", showTooltip: false, ref: (ref) => {
        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => this.onIncrease());
      }, icon: "plus-sign", disabled: this.value >= this.max || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' })), index.h("div", { class: "aria-announcement", "aria-live": "polite", "aria-atomic": "true" }, `${this.label || 'stepper'}: ${this.value}`)), this.host);
  }
  renderLabelDom() {
    return this.label ? (index.h("label", { class: "v-text-center v-text-medium-typeset-1", htmlFor: this.stepperId }, this.label)) : null;
  }
  get host() { return index.getElement(this); }
  static get watchers() { return {
    "value": ["watchValue"]
  }; }
};
__decorate([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaStepper.prototype, "globalSlimmers", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaStepper.prototype, "formFieldController", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaStepper.prototype, "changeEventEmitter", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaStepper.prototype, "inputEventPrevent", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaStepper.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaStepper.style = vegaStepperCss;

exports.vega_stepper = VegaStepper;
