var __decorate = (this && this.__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;
};
import { Component, h, Prop, Host, Element, Event, Watch } from '@stencil/core';
import { MaxNumberRule } from '../../helpers/validator/rules/max-number-rule';
import { MinNumberRule } from '../../helpers/validator/rules/min-number-rule';
import { sanitizeVegaComponent } from '../../utils/component';
import { convertToNumber, normalizeNumberByRanger } from '../../utils/number';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaBlur, VegaChange, VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
import ChangeManager from '../../helpers/change-manager/change-manager';
import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
import { arrayToClassString } from '../../utils/ui';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaStepperRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-stepper/runtime-metrics-payload-definition';
/**
 * @vegaVersion 1.0.5
 */
export class VegaStepper {
  constructor() {
    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;
  }
  static get is() { return "vega-stepper"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["./vega-stepper.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-stepper.css"]
  }; }
  static get properties() { return {
    "stepperId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies the unique identifier for the stepper component."
      },
      "attribute": "id",
      "reflect": true
    },
    "max": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.5"
          }],
        "text": "Defines the upper limit or maximum value that can be\n   incremented within the stepper component."
      },
      "attribute": "max",
      "reflect": true,
      "defaultValue": "9999"
    },
    "min": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.5"
          }],
        "text": "Defines the lower limit or minimum value that can be\n   decremented within the stepper component."
      },
      "attribute": "min",
      "reflect": true,
      "defaultValue": "0"
    },
    "value": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.5"
          }],
        "text": "Defines the initial or current value of the stepper component."
      },
      "attribute": "value",
      "reflect": true,
      "defaultValue": "0"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.5"
          }],
        "text": "Provides a descriptive text or string that serves\n   as the label or title for the stepper component."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "inputDisabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.31.0"
          }],
        "text": "Specifies whether the input field of the\n   stepper component is disabled. The increment and\n   decrement buttons are unaffected by this setting."
      },
      "attribute": "input-disabled",
      "reflect": false,
      "defaultValue": "null"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies whether the stepper component is disabled."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "isValid": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies the validation status of the stepper component."
      },
      "attribute": "is-valid",
      "reflect": true,
      "defaultValue": "null"
    },
    "autoValidation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.18.0"
          }],
        "text": "Determines whether automatic validation should be\n   implemented for the stepper component."
      },
      "attribute": "auto-validation",
      "reflect": true,
      "defaultValue": "true"
    },
    "buttonVariant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'primary' | 'secondary'",
        "resolved": "\"primary\" | \"secondary\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.19.0"
          }],
        "text": "Specifies the style variant for the stepper buttons."
      },
      "attribute": "button-variant",
      "reflect": false,
      "defaultValue": "'primary'"
    }
  }; }
  static get events() { return [{
      "method": "vegaChange",
      "name": "vegaChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.8"
          }],
        "text": "An event emitter notifying changes in the value of the stepper component."
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }, {
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "eventSemantics",
            "text": "namespace:native"
          }, {
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "An event emitter notifying changes in the value of the stepper component."
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "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);
