/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
'use strict';

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

const index = require('./index-9c2d04b3.js');
const helpers = require('./helpers-fd0d0292.js');
const theme = require('./theme-dfe81c2b.js');

const gascoInputMdCss = ".sc-gasco-input-h {\n  \n  --placeholder-color: var(--gasco-color-medium, #999999);\n  --placeholder-font-style: initial;\n  --placeholder-font-weight: initial;\n  --placeholder-opacity: .5;\n  --padding-top: 0;\n  --padding-end: 0;\n  --padding-bottom: 0;\n  --margin-bottom: 12px;\n  --padding-start: 0;\n  --box-shadow: 0px 4px 10px rgba(171, 190, 209, 0.4);\n  --border-radius: 8px;\n  --border-style: solid;\n  --border-width: 1px;\n  --border-color: var(--gasco-color-medium, #999999);\n  --background: #fff;\n  --color: var(--gasco-color-medium, #999999);\n  --line-height-secondary: 16px;\n  --font-size-secondary: 12px;\n  border-radius: var(--border-radius);\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  padding: 0 !important;\n  margin-bottom: var(--margin-bottom);\n  color: var(--color);\n  background: var(--background);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  border-width: var(--border-width);\n  font-family: var(--gasco-font-family, inherit);\n  z-index: 2;\n  transition: 300ms;\n}\n\n.gasco-color.sc-gasco-input-h {\n  color: var(--gasco-color-base);\n}\n\n.has-label.sc-gasco-input-h {\n  margin-top: var(--margin-bottom);\n}\n\n.native-input.sc-gasco-input, .native-input-code.sc-gasco-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n  background: transparent;\n  box-sizing: border-box;\n  appearance: none;\n  border: 0;\n  transition: 300ms;\n}\n.native-input.sc-gasco-input::placeholder, .native-input-code.sc-gasco-input::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n}\n.native-input.sc-gasco-input:-webkit-autofill, .native-input-code.sc-gasco-input:-webkit-autofill {\n  background-color: transparent;\n}\n.native-input.sc-gasco-input:invalid, .native-input-code.sc-gasco-input:invalid {\n  box-shadow: none;\n}\n.native-input.sc-gasco-input::-ms-clear, .native-input-code.sc-gasco-input::-ms-clear {\n  display: none;\n}\n\n.native-input.sc-gasco-input {\n  padding-left: var(--padding-start);\n  padding-right: var(--padding-end);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n}\n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {\n  .native-input.sc-gasco-input {\n    padding-left: unset;\n    padding-right: unset;\n    -webkit-padding-start: var(--padding-start);\n    padding-inline-start: var(--padding-start);\n    -webkit-padding-end: var(--padding-end);\n    padding-inline-end: var(--padding-end);\n  }\n}\n.native-input-label.sc-gasco-input {\n  position: absolute;\n  top: -10px;\n  left: 10px;\n  background: var(--background);\n  padding: 0 4px;\n  font-weight: 400;\n  line-height: var(--line-height-secondary);\n  font-size: var(--font-size-secondary);\n  border-radius: var(--border-radius);\n  transition: 300ms;\n}\n.native-input[readonly].sc-gasco-input {\n  cursor: default;\n}\n.native-input-textHelp.sc-gasco-input, .native-input-limit.sc-gasco-input {\n  position: absolute;\n  bottom: -17px;\n  left: 10px;\n  font-weight: 400;\n  font-size: var(--font-size-secondary);\n  line-height: var(--line-height-secondary);\n  transition: 300ms;\n}\n.native-input-limit.sc-gasco-input {\n  left: inherit;\n  right: 10px;\n}\n\n[disabled].sc-gasco-input-h, .has-disabled.sc-gasco-input-h {\n  --border-color: var(--gasco-color-light, #F1F1F1) !important;\n  --background: var(--gasco-color-light, #F1F1F1) !important;\n  --box-shadow: none;\n}\n\n.native-input[disabled].sc-gasco-input {\n  opacity: 0.8;\n}\n\n[disabled].sc-gasco-input-h .native-input-label.sc-gasco-input {\n  --background: var(--gasco-color-light, #F1F1F1);\n}\n\n.cloned-input.sc-gasco-input {\n  left: 0;\n  top: 0;\n  position: absolute;\n  pointer-events: none;\n}\n[dir=rtl].sc-gasco-input .cloned-input.sc-gasco-input, [dir=rtl].sc-gasco-input-h .cloned-input.sc-gasco-input, [dir=rtl] .sc-gasco-input-h .cloned-input.sc-gasco-input {\n  left: unset;\n  right: unset;\n  right: 0;\n}\n\n.input-indicator-icon.sc-gasco-input {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  background-position: left;\n  border: 0;\n  position: relative;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  appearance: none;\n  text-align: right;\n  align-items: center;\n  justify-content: flex-end;\n  display: flex;\n  margin-left: 12px;\n  color: #051C24;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 28px;\n  transition: 300ms;\n}\n.input-indicator-icon.sc-gasco-input::after {\n  content: \"\";\n  position: absolute;\n  height: 70%;\n  width: 1px;\n  right: -10px;\n  background: var(--border-color);\n  transition: 300ms;\n}\n\n.has-focus.sc-gasco-input-h {\n  pointer-events: none;\n  --border-color: var(--gasco-color-primary, #00A3E0) !important;\n}\n.has-focus.sc-gasco-input-h .native-input-label.sc-gasco-input, .has-focus.sc-gasco-input-h .native-input-textHelp.sc-gasco-input, .has-focus.sc-gasco-input-h .native-input-limit.sc-gasco-input, .has-focus.sc-gasco-input-h .native-input.code.sc-gasco-input {\n  color: var(--gasco-color-primary, #00A3E0);\n}\n.has-focus.sc-gasco-input-h .input-indicator-icon.sc-gasco-input::after {\n  background: var(--gasco-color-primary, #00A3E0);\n}\n\n.has-focus.sc-gasco-input-h [slot=start].sc-gasco-input {\n  color: var(--gasco-color-primary, #00A3E0);\n}\n\n.has-focus.sc-gasco-input-h input.sc-gasco-input, .has-focus.sc-gasco-input-h a.sc-gasco-input, .has-focus.sc-gasco-input-h button.sc-gasco-input {\n  pointer-events: auto;\n}\n\n.has-error.sc-gasco-input-h {\n  --border-color: var(--gasco-color-secondary, #EF3340) !important;\n}\n.has-error.sc-gasco-input-h .native-input-label.sc-gasco-input, .has-error.sc-gasco-input-h .native-input-textHelp.sc-gasco-input, .has-error.sc-gasco-input-h .native-input-limit.sc-gasco-input, .has-error.sc-gasco-input-h .native-input.code.sc-gasco-input {\n  color: var(--gasco-color-secondary, #EF3340);\n}\n.has-error.sc-gasco-input-h .input-indicator-icon.sc-gasco-input::after {\n  background: var(--gasco-color-secondary, #EF3340);\n}\n\n.has-success.sc-gasco-input-h {\n  --border-color: var(--gasco-color-success, #339900) !important;\n}\n.has-success.sc-gasco-input-h .native-input-label.sc-gasco-input, .has-success.sc-gasco-input-h .native-input-textHelp.sc-gasco-input, .has-success.sc-gasco-input-h .native-input-limit.sc-gasco-input, .has-success.sc-gasco-input-h .native-input.code.sc-gasco-input {\n  color: var(--gasco-color-success, #339900);\n}\n.has-success.sc-gasco-input-h .input-indicator-icon.sc-gasco-input::after {\n  background: var(--gasco-color-success, #339900);\n}\n\n.sc-gasco-input-s > ion-icon[slot=start], .sc-gasco-input-s > ion-icon[slot=end] {\n  font-size: 1.4em !important;\n  pointer-events: none;\n}\n\n.sc-gasco-input-s > ion-icon[slot=start] {\n  margin-left: 0.6em;\n  margin-right: -0.3em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {.sc-gasco-input-s > ion-icon[slot=start], \n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {\n  .sc-gasco-input-s > ion-icon[slot=start] {\n    margin-left: unset;\n    margin-right: unset;\n    -webkit-margin-start: 0.6em;\n    margin-inline-start: 0.6em;\n    -webkit-margin-end: -0.3em;\n    margin-inline-end: -0.3em;\n  }\n}\n\n.sc-gasco-input-s > ion-icon[slot=end] {\n  margin-left: -0.3em;\n  margin-right: 0.6em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {.sc-gasco-input-s > ion-icon[slot=end], \n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {\n  .sc-gasco-input-s > ion-icon[slot=end] {\n    margin-left: unset;\n    margin-right: unset;\n    -webkit-margin-start: -0.3em;\n    margin-inline-start: -0.3em;\n    -webkit-margin-end: 0.6em;\n    margin-inline-end: 0.6em;\n  }\n}\n\n@media (any-hover: hover) {\n  .sc-gasco-input-h:not([disabled]):hover {\n    box-shadow: var(--box-shadow);\n    --border-color: var(--gasco-color-dark, #222428);\n    border-radius: var(--border-radius);\n  }\n}\n.sc-gasco-input-h {\n  --padding-top: 12px;\n  --padding-end: 16.8px;\n  --padding-bottom: 12px;\n  --padding-start: 16.8px;\n  font-size: 14px;\n  max-width: 350px;\n  flex-grow: 0;\n}\n\n.input-indicator-icon.sc-gasco-input {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,<svg%20width='29'%20height='19'%20viewBox='0%200%2029%2019'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'><g%20id='Flag%20chile'><g%20id='Flag_of_Chile%201'%20clip-path='url(%23clip0_301_4618)'><path%20id='Vector'%20d='M0.732422%200H28.7324V19H0.732422V0Z'%20fill='white'/><path%20id='Vector_2'%20d='M0.732422%209.5V0H10.0658V9.5H0.732422Z'%20fill='%230039A6'/><path%20id='Vector_3'%20d='M0.732422%209.5H28.7324V19H0.732422V9.5Z'%20fill='%23D72B1F'/><path%20id='Vector_4'%20d='M5.39918%202.375L6.77071%206.67138L3.18018%204.01613H7.61818L4.02764%206.67138L5.39918%202.375Z'%20fill='white'/><path%20id='Vector_5'%20d='M10.0659%200H28.7326V9.5H10.0659V0Z'%20fill='white'/></g></g><defs><clipPath%20id='clip0_301_4618'><rect%20width='28'%20height='19'%20fill='white'%20transform='translate(0.732422)'/></clipPath></defs></svg>\");\n  width: 55px;\n  height: 35px;\n  background-size: 22px;\n}\n\n.input-large.sc-gasco-input-h {\n  max-width: 400px;\n  font-size: 16px;\n}\n\n.input-small.sc-gasco-input-h {\n  max-width: 280px;\n  font-size: 14px;\n}";

const GascoInput = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.gascoInput = index.createEvent(this, "gascoInput", 7);
    this.gascoChange = index.createEvent(this, "gascoChange", 7);
    this.gascoBlur = index.createEvent(this, "gascoBlur", 7);
    this.gascoFocus = index.createEvent(this, "gascoFocus", 7);
    this.gascoStyle = index.createEvent(this, "gascoStyle", 7);
    this.isComposing = false;
    this.inheritedAttributes = {};
    this.inputId = `gasco-input-${inputIds++}`;
    this.fireFocusEvents = true;
    this.hasFocus = false;
    /**
     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
     * Available options: `off`, `none`, `on`, `sentences`, `words`, `characters`.
     */
    this.autocapitalize = 'off';
    /**
     * Indicates whther the value of the control can be automatically completed by the browser.
     */
    this.autocomplete = 'off';
    /**
     * Whether auto correction should be enabled when the user is entering/editind the text value.
     */
    this.autocorrect = 'off';
    /**
     * This Boolean attributes lets you specify that a from control should have input focus when the page loads.
     */
    this.autofocus = false;
    /**
     * If `true`, the user cannot interact with the input.
     */
    this.disabled = false;
    /**
     * The type of control to display. The default type is `text`.
     */
    this.type = 'text';
    /**
     * The value of the input.
     */
    this.value = '';
    /**
     * If `true`, the user cannot modify the value.
     */
    this.readonly = false;
    /**
     * If `true`, the user must fill in a value before submitting a form.
     */
    this.required = false;
    /**
      * The name of the control, which is submitted with the form data.
      */
    this.name = this.inputId;
    /**
     * If `true`, the element will have its spelling and grammar checked.
     */
    this.spellcheck = false;
    this.onComposition = (v) => {
      this.isComposing = v;
    };
    this.onInput = (ev) => {
      const input = ev.target;
      if (input) {
        this.value = input.value || '';
      }
      this.gascoInput.emit(ev);
    };
    this.onBlur = (ev) => {
      this.hasFocus = false;
      this.emitStyle();
      if (this.fireFocusEvents) {
        this.gascoBlur.emit(ev);
      }
    };
    this.onFocus = (ev) => {
      this.hasFocus = true;
      this.emitStyle();
      if (this.fireFocusEvents) {
        this.gascoFocus.emit(ev);
      }
    };
  }
  //? WATCHs
  disabledChanged() {
    this.emitStyle();
  }
  /**
   * Update the item classes when the placeholder changes
   */
  placeholderChanged() {
    this.emitStyle();
  }
  /**
    * Update the native input element when the value changes
    */
  valueChanged() {
    const nativeInput = this.nativeInput;
    const value = this.getValue();
    if (nativeInput && nativeInput.value !== value && !this.isComposing) {
      /**
        * Assigning the native input's value on attribute
        * value change, allows `gascoInput` implementations
        * to override the control's value.
        *
        * Used for patterns such as input trimming (removing whitespace),
        * or input masking.
        */
      nativeInput.value = value.trim();
    }
    else if (this.indicator) {
      if (nativeInput.value.length === 1) {
        this.value = this.value + ' ';
      }
      else if (nativeInput.value.length === 6) {
        this.value = this.value + ' ';
      }
    }
    this.emitStyle();
    this.gascoChange.emit({ value: typeof this.value !== 'number' ? this.value : this.value.toString() });
  }
  //? METHODs
  /**
   * Sets focus on the native `input` in `gasco-input`. Use this method instead of the global
   * `input.focus()`.
   */
  async setFocus() {
    if (this.nativeInput) {
      this.nativeInput.focus();
    }
  }
  /**
   * Sets blur on the native `input` in `gasco-input`. Use this method instead of the global
   * `input.blur()`.
   * @internal
   */
  async setBlur() {
    if (this.nativeInput) {
      this.nativeInput.blur();
    }
  }
  /**
  * Returns the native `<input>` element used under the hood.
  */
  getInputElement() {
    return Promise.resolve(this.nativeInput);
  }
  //? FUNCTIONs PRIVATEs
  getValue() {
    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
  }
  emitStyle() {
    this.gascoStyle.emit({
      interactive: true,
      input: true,
      'has-placeholder': this.placeholder !== undefined,
      'has-value': this.hasValue(),
      'has-focus': this.hasFocus,
      'has-label': this.label !== undefined,
      'interactive-disabled': this.disabled,
    });
  }
  ;
  hasValue() {
    return this.getValue().length > 0;
  }
  ;
  componentWillLoad() {
    this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['tabindex', 'title']));
  }
  connectedCallback() {
    this.emitStyle();
    {
      document.dispatchEvent(new CustomEvent('gascoInputDidLoad', {
        detail: this.el,
      }));
    }
  }
  componentDidLoad() {
    const nativeInput = this.nativeInput;
    if (nativeInput) {
      nativeInput.addEventListener('compositionstart', this.onComposition.bind(true));
      nativeInput.addEventListener('compositionend', this.onComposition.bind(false));
    }
  }
  disconnectedCallback() {
    {
      document.dispatchEvent(new CustomEvent('gascoInputDidUnload', {
        detail: this.el,
      }));
    }
    const nativeInput = this.nativeInput;
    if (nativeInput) {
      nativeInput.removeEventListener('compositionstart', this.onComposition.bind(true));
      nativeInput.removeEventListener('compositionend', this.onComposition.bind(false));
    }
  }
  render() {
    const el = this.el;
    const value = this.getValue();
    const labelId = this.inputId + '-lbl';
    const finalSize = this.size === undefined && false ? 'small' : this.size;
    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
        'in-select': theme.hostContext('gasco-select', el),
        'has-value': this.hasValue(),
        'has-focus': this.hasFocus,
        'has-disabled': this.disabled,
        'has-label': this.label !== undefined,
        [`input-${finalSize}`]: finalSize !== undefined,
      }) }, this.label && (index.h("span", { class: "native-input-label" }, this.label)), this.indicator && (index.h("span", { class: "input-indicator-icon" }, "+56")), index.h("slot", { name: "start" }), index.h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId ? labelId : null, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.indicator ? 11 : this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.indicator ? 'tel' : this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), index.h("slot", { name: "end" }), this.textHelp && (index.h("span", { class: "native-input-textHelp" }, this.textHelp)), this.limit && (index.h("span", { class: "native-input-limit" }, this.value.toString().length, "/", this.maxlength))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "disabled": ["disabledChanged"],
    "placeholder": ["placeholderChanged"],
    "value": ["valueChanged"]
  }; }
};
let inputIds = 0;
GascoInput.style = gascoInputMdCss;

const gascoInputCodeMdCss = ".sc-gasco-input-code-h {\n  \n  --placeholder-color: var(--gasco-color-medium, #999999);\n  --placeholder-font-style: initial;\n  --placeholder-font-weight: initial;\n  --placeholder-opacity: .5;\n  --padding-top: 0;\n  --padding-end: 0;\n  --padding-bottom: 0;\n  --margin-bottom: 12px;\n  --padding-start: 0;\n  --box-shadow: 0px 4px 10px rgba(171, 190, 209, 0.4);\n  --border-radius: 8px;\n  --border-style: solid;\n  --border-width: 1px;\n  --border-color: var(--gasco-color-medium, #999999);\n  --background: #fff;\n  --color: var(--gasco-color-medium, #999999);\n  --line-height-secondary: 16px;\n  --font-size-secondary: 12px;\n  border-radius: var(--border-radius);\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  padding: 0 !important;\n  margin-bottom: var(--margin-bottom);\n  color: var(--color);\n  background: var(--background);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  border-width: var(--border-width);\n  font-family: var(--gasco-font-family, inherit);\n  z-index: 2;\n  transition: 300ms;\n}\n\n.gasco-color.sc-gasco-input-code-h {\n  color: var(--gasco-color-base);\n}\n\n.has-label.sc-gasco-input-code-h {\n  margin-top: var(--margin-bottom);\n}\n\n.native-input.sc-gasco-input-code, .native-input-code.sc-gasco-input-code {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n  background: transparent;\n  box-sizing: border-box;\n  appearance: none;\n  border: 0;\n  transition: 300ms;\n}\n.native-input.sc-gasco-input-code::placeholder, .native-input-code.sc-gasco-input-code::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n}\n.native-input.sc-gasco-input-code:-webkit-autofill, .native-input-code.sc-gasco-input-code:-webkit-autofill {\n  background-color: transparent;\n}\n.native-input.sc-gasco-input-code:invalid, .native-input-code.sc-gasco-input-code:invalid {\n  box-shadow: none;\n}\n.native-input.sc-gasco-input-code::-ms-clear, .native-input-code.sc-gasco-input-code::-ms-clear {\n  display: none;\n}\n\n.native-input.sc-gasco-input-code {\n  padding-left: var(--padding-start);\n  padding-right: var(--padding-end);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n}\n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {\n  .native-input.sc-gasco-input-code {\n    padding-left: unset;\n    padding-right: unset;\n    -webkit-padding-start: var(--padding-start);\n    padding-inline-start: var(--padding-start);\n    -webkit-padding-end: var(--padding-end);\n    padding-inline-end: var(--padding-end);\n  }\n}\n.native-input-label.sc-gasco-input-code {\n  position: absolute;\n  top: -10px;\n  left: 10px;\n  background: var(--background);\n  padding: 0 4px;\n  font-weight: 400;\n  line-height: var(--line-height-secondary);\n  font-size: var(--font-size-secondary);\n  border-radius: var(--border-radius);\n  transition: 300ms;\n}\n.native-input[readonly].sc-gasco-input-code {\n  cursor: default;\n}\n.native-input-textHelp.sc-gasco-input-code, .native-input-limit.sc-gasco-input-code {\n  position: absolute;\n  bottom: -17px;\n  left: 10px;\n  font-weight: 400;\n  font-size: var(--font-size-secondary);\n  line-height: var(--line-height-secondary);\n  transition: 300ms;\n}\n.native-input-limit.sc-gasco-input-code {\n  left: inherit;\n  right: 10px;\n}\n\n[disabled].sc-gasco-input-code-h, .has-disabled.sc-gasco-input-code-h {\n  --border-color: var(--gasco-color-light, #F1F1F1) !important;\n  --background: var(--gasco-color-light, #F1F1F1) !important;\n  --box-shadow: none;\n}\n\n.native-input[disabled].sc-gasco-input-code {\n  opacity: 0.8;\n}\n\n[disabled].sc-gasco-input-code-h .native-input-label.sc-gasco-input-code {\n  --background: var(--gasco-color-light, #F1F1F1);\n}\n\n.cloned-input.sc-gasco-input-code {\n  left: 0;\n  top: 0;\n  position: absolute;\n  pointer-events: none;\n}\n[dir=rtl].sc-gasco-input-code .cloned-input.sc-gasco-input-code, [dir=rtl].sc-gasco-input-code-h .cloned-input.sc-gasco-input-code, [dir=rtl] .sc-gasco-input-code-h .cloned-input.sc-gasco-input-code {\n  left: unset;\n  right: unset;\n  right: 0;\n}\n\n.input-indicator-icon.sc-gasco-input-code {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  background-position: left;\n  border: 0;\n  position: relative;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  appearance: none;\n  text-align: right;\n  align-items: center;\n  justify-content: flex-end;\n  display: flex;\n  margin-left: 12px;\n  color: #051C24;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 28px;\n  transition: 300ms;\n}\n.input-indicator-icon.sc-gasco-input-code::after {\n  content: \"\";\n  position: absolute;\n  height: 70%;\n  width: 1px;\n  right: -10px;\n  background: var(--border-color);\n  transition: 300ms;\n}\n\n.has-focus.sc-gasco-input-code-h {\n  pointer-events: none;\n  --border-color: var(--gasco-color-primary, #00A3E0) !important;\n}\n.has-focus.sc-gasco-input-code-h .native-input-label.sc-gasco-input-code, .has-focus.sc-gasco-input-code-h .native-input-textHelp.sc-gasco-input-code, .has-focus.sc-gasco-input-code-h .native-input-limit.sc-gasco-input-code, .has-focus.sc-gasco-input-code-h .native-input.code.sc-gasco-input-code {\n  color: var(--gasco-color-primary, #00A3E0);\n}\n.has-focus.sc-gasco-input-code-h .input-indicator-icon.sc-gasco-input-code::after {\n  background: var(--gasco-color-primary, #00A3E0);\n}\n\n.has-focus.sc-gasco-input-code-h [slot=start].sc-gasco-input-code {\n  color: var(--gasco-color-primary, #00A3E0);\n}\n\n.has-focus.sc-gasco-input-code-h input.sc-gasco-input-code, .has-focus.sc-gasco-input-code-h a.sc-gasco-input-code, .has-focus.sc-gasco-input-code-h button.sc-gasco-input-code {\n  pointer-events: auto;\n}\n\n.has-error.sc-gasco-input-code-h {\n  --border-color: var(--gasco-color-secondary, #EF3340) !important;\n}\n.has-error.sc-gasco-input-code-h .native-input-label.sc-gasco-input-code, .has-error.sc-gasco-input-code-h .native-input-textHelp.sc-gasco-input-code, .has-error.sc-gasco-input-code-h .native-input-limit.sc-gasco-input-code, .has-error.sc-gasco-input-code-h .native-input.code.sc-gasco-input-code {\n  color: var(--gasco-color-secondary, #EF3340);\n}\n.has-error.sc-gasco-input-code-h .input-indicator-icon.sc-gasco-input-code::after {\n  background: var(--gasco-color-secondary, #EF3340);\n}\n\n.has-success.sc-gasco-input-code-h {\n  --border-color: var(--gasco-color-success, #339900) !important;\n}\n.has-success.sc-gasco-input-code-h .native-input-label.sc-gasco-input-code, .has-success.sc-gasco-input-code-h .native-input-textHelp.sc-gasco-input-code, .has-success.sc-gasco-input-code-h .native-input-limit.sc-gasco-input-code, .has-success.sc-gasco-input-code-h .native-input.code.sc-gasco-input-code {\n  color: var(--gasco-color-success, #339900);\n}\n.has-success.sc-gasco-input-code-h .input-indicator-icon.sc-gasco-input-code::after {\n  background: var(--gasco-color-success, #339900);\n}\n\n.sc-gasco-input-code-s > ion-icon[slot=start], .sc-gasco-input-code-s > ion-icon[slot=end] {\n  font-size: 1.4em !important;\n  pointer-events: none;\n}\n\n.sc-gasco-input-code-s > ion-icon[slot=start] {\n  margin-left: 0.6em;\n  margin-right: -0.3em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {.sc-gasco-input-code-s > ion-icon[slot=start], \n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {\n  .sc-gasco-input-code-s > ion-icon[slot=start] {\n    margin-left: unset;\n    margin-right: unset;\n    -webkit-margin-start: 0.6em;\n    margin-inline-start: 0.6em;\n    -webkit-margin-end: -0.3em;\n    margin-inline-end: -0.3em;\n  }\n}\n\n.sc-gasco-input-code-s > ion-icon[slot=end] {\n  margin-left: -0.3em;\n  margin-right: 0.6em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {.sc-gasco-input-code-s > ion-icon[slot=end], \n@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {\n  .sc-gasco-input-code-s > ion-icon[slot=end] {\n    margin-left: unset;\n    margin-right: unset;\n    -webkit-margin-start: -0.3em;\n    margin-inline-start: -0.3em;\n    -webkit-margin-end: 0.6em;\n    margin-inline-end: 0.6em;\n  }\n}\n\n@media (any-hover: hover) {\n  .sc-gasco-input-code-h:not([disabled]):hover {\n    box-shadow: var(--box-shadow);\n    --border-color: var(--gasco-color-dark, #222428);\n    border-radius: var(--border-radius);\n  }\n}\n.sc-gasco-input-code-h {\n  --padding-top: 8px;\n  --padding-end: 16.8px;\n  --padding-bottom: 8px;\n  --padding-start: 16.8px;\n  font-size: 14px;\n  max-width: 350px;\n  flex: 1 1;\n}\n\n.native-input-code.sc-gasco-input-code-h {\n  justify-content: center;\n}\n\n.native-input-code.sc-gasco-input-code {\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n.native-input-code.sc-gasco-input-code .native-input.code.sc-gasco-input-code {\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 24px;\n}\n\n.input-large.sc-gasco-input-code-h {\n  max-width: 400px;\n  font-size: 16px;\n}\n\n.input-small.sc-gasco-input-code-h {\n  max-width: 280px;\n  font-size: 14px;\n}";

const GascoInputCode = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.gascoCodeDone = index.createEvent(this, "gascoCodeDone", 7);
    this.gascoInput = index.createEvent(this, "gascoInput", 7);
    this.gascoChange = index.createEvent(this, "gascoChange", 7);
    this.gascoBlur = index.createEvent(this, "gascoBlur", 7);
    this.gascoFocus = index.createEvent(this, "gascoFocus", 7);
    this.gascoStyle = index.createEvent(this, "gascoStyle", 7);
    this.isComposing = false;
    this.arrayInput = new Array();
    this.inheritedAttributes = {};
    this.inputId = 'gasco-input-code-';
    this.fireFocusEvents = true;
    this.hasFocus = false;
    /**
     * We can make everything automatic after completing the code for default is false.
     */
    this.autosubmit = false;
    /**
     * This Boolean attributes lets you specify that a from control should have input focus when the page loads.
     */
    this.autofocus = false;
    /**
     * If `true`, the user cannot interact with the input.
     */
    this.disabled = false;
    /**
     * The type of control to display. The default type is `text`.
     */
    this.type = 'text';
    /**
     * The value of the input.
     */
    this.value = '';
    /**
     * If the value of the type attribute is `text` or `numeric`, this attribute specifies the maximum number of characters that the user can enter.
     * Defaulf `4`
     */
    this.maxlength = 4;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * With secure what you are looking for is that the fields are not seen.
     * for default is true
     */
    this.secure = true;
    /**
     * A simple count for the loop input
     */
    this.count = 0;
    //? METHODs
    this.onComposition = (v) => {
      this.isComposing = v;
    };
    this.onInput = (ev) => {
      this.count += 1;
      const input = ev.target;
      if (input) {
        this.value = input.value;
        this.handleInput(input);
      }
      this.gascoInput.emit(ev);
    };
    this.onBlur = (ev) => {
      this.hasFocus = false;
      this.emitStyle();
      if (this.fireFocusEvents) {
        this.gascoBlur.emit(ev);
      }
    };
    this.onFocus = (ev) => {
      this.hasFocus = true;
      this.emitStyle();
      if (this.fireFocusEvents) {
        this.gascoFocus.emit(ev);
      }
    };
  }
  //? WATCHs
  disabledChanged() {
    this.emitStyle();
  }
  getValue() {
    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
  }
  emitStyle() {
    this.gascoStyle.emit({
      interactive: true,
      input: true,
      'has-value': this.hasValue(),
      'has-focus': this.hasFocus,
      'interactive-disabled': this.disabled,
    });
  }
  ;
  handleInput(input) {
    this.el.childNodes.forEach((_, index) => {
      var _a;
      if (this.count - 1 === index) {
        const child = (_a = this.el.childNodes[index + 1]) === null || _a === void 0 ? void 0 : _a.firstChild;
        child === null || child === void 0 ? void 0 : child.focus();
        this.arrayInput[index] = input.value;
      }
    });
    if (this.autosubmit && this.arrayInput.join('').length === this.maxlength) {
      this.gascoCodeDone.emit({ detail: this.arrayInput.join('') });
    }
    this.emitStyle();
    this.gascoChange.emit({ value: typeof this.value !== 'number' ? this.value : this.value.toString() });
  }
  hasValue() {
    return this.getValue().length > 0;
  }
  ;
  componentWillLoad() {
    for (let i = 0; i < this.maxlength; i++) {
      this.arrayInput.push('');
    }
    this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['tabindex', 'title']));
  }
  connectedCallback() {
    this.emitStyle();
    {
      document.dispatchEvent(new CustomEvent('gascoInputDidLoad', {
        detail: this.el,
      }));
    }
  }
  componentDidLoad() {
    const nativeInput = this.el.childNodes[0].firstChild;
    if (nativeInput) {
      nativeInput.addEventListener('compositionstart', this.onComposition.bind(true));
      nativeInput.addEventListener('compositionend', this.onComposition.bind(false));
    }
  }
  disconnectedCallback() {
    {
      document.dispatchEvent(new CustomEvent('gascoInputDidUnload', {
        detail: this.el,
      }));
    }
    const nativeInput = this.el.childNodes[0].firstChild;
    if (nativeInput) {
      nativeInput.removeEventListener('compositionstart', this.onComposition.bind(true));
      nativeInput.removeEventListener('compositionend', this.onComposition.bind(false));
    }
  }
  render() {
    const finalSize = this.size === undefined && false ? 'small' : this.size;
    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
        'has-value': this.hasValue(),
        'has-focus': this.hasFocus,
        [`input-${finalSize}`]: finalSize !== undefined,
      }) }, this.arrayInput.map((value, index$1) => (index.h("div", { class: "native-input-code" }, index.h("input", Object.assign({ class: "native-input code", "aria-labelledby": this.name ? this.name + index$1 : null, disabled: this.disabled, autoFocus: this.autofocus && index$1 === 0, inputMode: this.inputmode, maxLength: 1, name: this.name + index$1, pattern: this.pattern, type: this.type, value: value, placeholder: this.secure ? '*' : '0', onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)))))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "disabled": ["disabledChanged"]
  }; }
};
GascoInputCode.style = gascoInputCodeMdCss;

exports.gasco_input = GascoInput;
exports.gasco_input_code = GascoInputCode;
