'use strict';

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

const index = require('./index-399a4a13.js');
const utils = require('./utils-311c1b40.js');

const numberPickerCss = ".ibk-number-picker{display:inline-flex;align-items:normal;box-sizing:border-box;border:1px solid var(--gray4);border-radius:4px;overflow:hidden}.ibk-number-picker *{box-sizing:border-box}.ibk-number-picker__input{height:46px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;outline:none;border:solid var(--gray4);border-width:0 1px 0 1px;padding:0 15px;text-align:center;font-family:var(--fontGeometria);font-weight:500;font-size:16px}.ibk-number-picker__input:read-only{cursor:default}.ibk-number-picker__button{width:46px;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none;background-color:transparent;border:none;font-size:20px;color:var(--primaryGreen1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--fast)}.ibk-number-picker__button--disabled{pointer-events:none;background-color:var(--gray5);color:var(--gray3)}.ibk-number-picker__button:hover{background-color:var(--gray5)}.ibk-number-picker__button:active .ibk-number-picker__button-icon{transform:translateY(1px)}.ibk-number-picker--medium .ibk-number-picker__input{width:70px}.ibk-number-picker--large .ibk-number-picker__input{width:140px}.ibk-number-picker--full{width:100%}.ibk-number-picker--full .ibk-number-picker__input{width:100%}";

const IbkNumberPicker = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.onchange = index.createEvent(this, "onchange", 7);
    /** Define el tamaño del selector<br>
     * <strong>Medium: </strong>el ancho será para un número de dos dígitos<br>
     * <strong>Large: </strong>el ancho será para un número de hasta 8 dígitos<br>
     * <strong>Full: </strong>ocupará el 100% del ancho disponible
     */
    this.size = 'medium';
    /** Determina el número máximo del selector, por defecto será 100,000 */
    this.max = 10;
    /** Determina el número mínimo del selector, por defecto será 0 */
    this.min = 0;
    /** Determina si el número se puede editar manualmente, por defecto solo se usarán los ícono de más y menos */
    this.editable = false;
    /** Define la cantidad de números que se agregarán o quitarán a al valor actual */
    this._bounce = 1;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return utils.modifiersToClass('ibk-number-picker', [this.size]);
    };
    /** Define de cuánto en cuánto cambiará el número al dar click en los botones más o menos */
    this.setBounce = () => {
      if (this._action == 'add') {
        if (this.current >= 0 && this.current < 20) {
          this._bounce = 1;
        }
        else if (this.current >= 20 && this.current < 999) {
          this._bounce = 10;
        }
        else if (this.current >= 100 && this.current < 9999) {
          this._bounce = 100;
        }
        else {
          this._bounce = 1000;
        }
      }
      else {
        if (this.current >= 0 && this.current <= 20) {
          this._bounce = 1;
        }
        else if (this.current > 20 && this.current <= 1000) {
          this._bounce = 10;
        }
        else if (this.current > 100 && this.current <= 10000) {
          this._bounce = 100;
        }
        else {
          this._bounce = 1000;
        }
      }
    };
    /** Acción cuando se da click sobre los botones más o menos */
    this.changeQuantity = (action) => {
      this._action = action;
      if (this._action == 'add') {
        this.current += this._bounce;
        if (this.current > this.max) {
          this.current = this.max;
        }
      }
      else {
        this.current -= this._bounce;
        if (this.current < this.min) {
          this.current = this.min;
        }
      }
      this.setBounce();
      this._currentFormated = utils.numberFormat(this.current);
      this.onchange.emit({
        number: this.current,
        formated: this._currentFormated
      });
    };
    /** Se ejecutá cuando el usuario digita manualmente el número en el calendario */
    this.typeNumber = (e) => {
      const t = e.target;
      if (t.value == '') {
        this.current = this.min;
      }
      else {
        this.current = parseInt(t.value.replace(/,/, ''));
        this.current = (isNaN(this.current) || t.value == '') ? 0 : this.current;
        if (this.current <= this.min) {
          this.current = this.min;
        }
        else if (this.current >= this.max) {
          this.current = this.max;
        }
      }
      this._currentFormated = utils.numberFormat(this.current);
      const input = this.host.querySelector('.ibk-number-picker__input');
      input.value = this._currentFormated;
      this.setBounce();
      this.onchange.emit({
        number: this.current,
        formated: this._currentFormated
      });
    };
  }
  componentWillLoad() {
    var _a;
    this.current = (_a = this.current) !== null && _a !== void 0 ? _a : this.max;
    this._currentFormated = utils.numberFormat(this.current);
    this.setBounce();
  }
  render() {
    return (index.h("div", { class: this.containerClass() }, index.h("button", { type: "button", class: 'ibk-number-picker__button' + (this.current <= this.min ? ' ibk-number-picker__button--disabled' : ''), onClick: () => this.changeQuantity('remove') }, index.h("i", { class: "ibk-number-picker__button-icon icon-xs-minus" })), index.h("input", { type: "text", class: "ibk-number-picker__input", value: this._currentFormated, readOnly: !this.editable, onInput: this.typeNumber }), index.h("button", { type: "button", class: 'ibk-number-picker__button' + (this.current >= this.max ? ' ibk-number-picker__button--disabled' : ''), onClick: () => this.changeQuantity('add') }, index.h("i", { class: "ibk-number-picker__button-icon icon-xs-plus" }))));
  }
  get host() { return index.getElement(this); }
};
IbkNumberPicker.style = numberPickerCss;

exports.ibk_number_picker = IbkNumberPicker;
