Quantity Input

<gstock-quantity-input> | GstockQuantityInput

Tamaño

Utilice el atributo de size para cambiar el tamaño del componente.

<gstock-quantity-input size="small"></gstock-quantity-input>
<gstock-quantity-input size="medium"></gstock-quantity-input>
<gstock-quantity-input size="large"></gstock-quantity-input>

Marcador de posición

Utilice el atributo placeholder para agregar un marcador de posición. 

<gstock-quantity-input placeholder="Enter value..."></gstock-quantity-input>

Deshabilitado

Utilice el atributo disabled para deshabilitar el componente.

<gstock-quantity-input disabled="disabled" value="10"></gstock-quantity-input>

Solo lectura

Utilice el atributo readonly para permitir leer el valor y no modificarlo. 

<gstock-quantity-input readonly="readonly" value="10"></gstock-quantity-input>

Etiqueta y texto de ayuda

Utilice el atributo label y help-text para añadir una etiqueta y texto de ayuda al componente y sea más accesible. 

<gstock-quantity-input label="Label:" help-text="This is a test help-text."></gstock-quantity-input>

Para utilizar HTML personalizado en las etiquetas y textos de ayuda, utilice los slots label y help-text.

Custom help-text with a link. 
<gstock-quantity-input>
  <label slot="label" style="display: inline-flex; gap: 4px">
    <gstock-icon name="edit" size="small"></gstock-icon>
    Custom label:
  </label>
  <span slot="help-text">
    Custom help-text with a
    <a href="#label-and-help-text">link</a>.
  </span>
</gstock-quantity-input>

Formato numérico

Utilice el atributo number-format para cambiar el formato del número. De forma predeterminada, el formato del número es #,###.## y este atributo acepta los siguientes formatos: 

<gstock-quantity-input number-format="#.###,##" value="1234.56"></gstock-quantity-input>
<gstock-quantity-input number-format="#,###.##" value="1234.56"></gstock-quantity-input>
<gstock-quantity-input number-format="# ###.##" value="1234.56"></gstock-quantity-input>
<gstock-quantity-input number-format="# ###,##" value="1234.56"></gstock-quantity-input>

Mínimo / Máximo

Utilice los atributos min y max para definir el valor mínimo y máximo. 

<gstock-quantity-input placeholder="Min 5 / Max 10" min="5" max="10"></gstock-quantity-input>

Valores negativos

Utilice el atributo allow-negative para permitir valores negativos. Por defecto, el componente acepta solo valores positivos. 

<gstock-quantity-input allow-negative="allow-negative"></gstock-quantity-input>

Decimales

Utilice el atributo decimals para definir el número de decimales.

<gstock-quantity-input value="1.23456789" decimals="5"></gstock-quantity-input>

Incrementar / Decrementar

Utiliza el atributo step para definir el valor que se incrementa o decrementa cuando se presiona el botón correspondiente. 

<gstock-quantity-input step="10"></gstock-quantity-input>

Eventos

Evento Change

Utilice el evento gstock-change-event para observar cuándo se modificó el valor. Para emitir este evento, cambie un valor en el componente.

  • Value:
  • Display Label:
  • Emitted Events:
  • Validity:
  • Validation Message:
  • Check Validity:
  • Report Validity: 
<gstock-quantity-input label="Change Event"></gstock-quantity-input>

<ul class="output">
  <li>
    <span class="output__key">Value: </span>
    <code class="output__value value"></code>
  </li>
  <li>
    <span class="output__key">Display Label: </span>
    <code class="output__value display-label"></code>
  </li>
  <li>
    <span class="output__key">Emitted Events: </span>
    <code class="output__value emitted-events"></code>
  </li>
  <li>
    <span class="output__key">Validity: </span>
    <code class="output__value validity"></code>
  </li>
  <li>
    <span class="output__key">Validation Message: </span>
    <code class="output__value validation-message"></code>
  </li>
  <li>
    <span class="output__key">Check Validity: </span>
    <code class="output__value check-validity"></code>
  </li>
  <li>
    <span class="output__key">Report Validity: </span>
    <code class="output__value report-validity"></code>
  </li>
</ul>

<script type="module">
  
  const quantityInput = document.querySelector('gstock-quantity-input');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');
  const emittedEvents = document.querySelector('.output__value.emitted-events');
  const validity = document.querySelector('.output__value.validity');
  const validationMessage = document.querySelector('.output__value.validation-message');
  const checkValidity = document.querySelector('.output__value.check-validity');
  const reportValidity = document.querySelector('.output__value.report-validity');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-quantity-input'),
  ]).then(() => {
    const emittedEventsList = [];

    value.innerText = quantityInput.value;
    displayLabel.innerText = quantityInput.displayLabel;
    validity.innerText = JSON.stringify(quantityInput.validity, undefined, 2);
    validationMessage.innerText = quantityInput.validationMessage;
    checkValidity.innerText = quantityInput.checkValidity();
    reportValidity.innerText = quantityInput.reportValidity();

    quantityInput.addEventListener('gstock-change-event', event => {
      console.info('Emitted event', event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
      emittedEvents.innerText = emittedEventsList.length;
      validity.innerText = JSON.stringify(target.validity, undefined, 2);
      validationMessage.innerText = target.validationMessage;
      checkValidity.innerText = target.checkValidity();
      reportValidity.innerText = target.reportValidity();
    });
  });
</script>

Evento Input

Utilice el evento gstock-input-event para observar cuándo se ingresó el valor. Para emitir este evento, introduce un valor en el componente.

  • Value:
  • Display Label:
  • Emitted Events:
  • Validity:
  • Validation Message:
  • Check Validity:
  • Report Validity: 
<gstock-quantity-input label="Input Event" number-format="#.###,##"></gstock-quantity-input>

<ul class="output">
  <li>
    <span class="output__key">Value: </span>
    <code class="output__value value"></code>
  </li>
  <li>
    <span class="output__key">Display Label: </span>
    <code class="output__value display-label"></code>
  </li>
  <li>
    <span class="output__key">Emitted Events: </span>
    <code class="output__value emitted-events"></code>
  </li>
  <li>
    <span class="output__key">Validity: </span>
    <code class="output__value validity"></code>
  </li>
  <li>
    <span class="output__key">Validation Message: </span>
    <code class="output__value validation-message"></code>
  </li>
  <li>
    <span class="output__key">Check Validity: </span>
    <code class="output__value check-validity"></code>
  </li>
  <li>
    <span class="output__key">Report Validity: </span>
    <code class="output__value report-validity"></code>
  </li>
</ul>

<script type="module">
  
  const quantityInput = document.querySelector('gstock-quantity-input');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');
  const emittedEvents = document.querySelector('.output__value.emitted-events');
  const validity = document.querySelector('.output__value.validity');
  const validationMessage = document.querySelector('.output__value.validation-message');
  const checkValidity = document.querySelector('.output__value.check-validity');
  const reportValidity = document.querySelector('.output__value.report-validity');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-quantity-input'),
  ]).then(() => {
    const emittedEventsList = [];

    value.innerText = quantityInput.value;
    displayLabel.innerText = quantityInput.displayLabel;
    validity.innerText = JSON.stringify(quantityInput.validity, undefined, 2);
    validationMessage.innerText = quantityInput.validationMessage;
    checkValidity.innerText = quantityInput.checkValidity();
    reportValidity.innerText = quantityInput.reportValidity();

    quantityInput.addEventListener('gstock-input-event', async event => {
      console.info('Emitted event', event);
      emittedEventsList.push({
        ...event,
      });
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
      emittedEvents.innerText = emittedEventsList.length;
      validity.innerText = JSON.stringify(target.validity, undefined, 2);
      validationMessage.innerText = target.validationMessage;
      checkValidity.innerText = target.checkValidity();
      reportValidity.innerText = target.reportValidity();
    });
  });
</script>

Control de formulario

Campo obligatorio

Utilice el atributo required para que el valor del componente sea obligatorio.

Submit Reset 
<form>
  <gstock-quantity-input
    number-format="#.###,##"
    name="test"
    label="Required field:"
    required="required"
    help-text="The form will not be submitted if a required field is incomplete."></gstock-quantity-input>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-quantity-input'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(event.target));
      alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
    });
  });
</script>

<style>
  gstock-button {
    margin-top: var(--gstock-legacy-spacing-8);
  }
</style>

Errores de validación personalizados

Para crear un error de validación personalizado, pase un string que no esté vacío al método setCustomValidity().

Esto anulará cualquier restricción de validación existente. Para que el componente vuelva a ser válido, vuelva a llamar a setCustomValidity() con un string vacío.

Submit Reset 
<form>
  <gstock-quantity-input
    name="test"
    label="Value:"
    required="required"
    help-text="Type the number '123' to make the component valid"></gstock-quantity-input>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');
  const quantityInput = form.querySelector('gstock-quantity-input');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-quantity-input'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(event.target));
      alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
    });

    quantityInput.addEventListener('gstock-input-event', event => {
      const target = event.target;

      if (target.value === '123') {
        target.setCustomValidity('');
      } else {
        target.setCustomValidity("You must type '123' before sending!");
      }
    });
  });
</script>

<style>
  gstock-button {
    margin-top: var(--gstock-legacy-spacing-8);
  }
</style>

Estilos de validación

Utilice el atributo validity-styles para aplicar estilos de validación. Estos estilos se aplican únicamente después de una interacción del usuario.

Submit Reset 
<form>
  <gstock-quantity-input
    name="test"
    label="Value:"
    help-text="This field is required."
    autocomplete="off"
    thousandsseparator=","
    decimalseparator="."
    required="required"
    validity-styles="validity-styles"></gstock-quantity-input>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-quantity-input'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(event.target));
      alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
    });
  });
</script>

<style>
  gstock-button {
    margin-top: var(--gstock-legacy-spacing-8);
  }
</style>

Validación en línea

Para desactivar los mensajes de error de los navegadores, debe cancelar el evento gstock-invalid-event. Luego, puede aplicar sus propios errores de validación en línea.

Submit Reset 
<form>
  <gstock-quantity-input
    name="test"
    label="Value:"
    help-text="This field is required."
    autocomplete="off"
    required="required"
    validity-styles="validity-styles"></gstock-quantity-input>
  <div id="error-message" aria-live="polite" hidden="hidden"></div>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');
  const errorMessage = document.querySelector('#error-message');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-quantity-input'),
  ]).then(() => {
    form.addEventListener(
      'gstock-invalid-event',
      event => {
        event.preventDefault();
        errorMessage.textContent = `Error: ${event.target.validationMessage}`;
        errorMessage.hidden = false;
        event.target.focus();
      },
      {
        capture: true,
      },
    );

    form.addEventListener('submit', event => {
      event.preventDefault();
      errorMessage.hidden = true;
      errorMessage.textContent = '';

      setTimeout(() => {
        const data = Object.fromEntries(new FormData(event.target));
        alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
      }, 50);
    });

    form.addEventListener('reset', () => {
      errorMessage.hidden = true;
      errorMessage.textContent = '';
    });
  });
</script>

<style>
  #error-message {
    margin-block: var(--gstock-legacy-spacing-4);
  }

  gstock-button {
    margin-top: var(--gstock-legacy-spacing-8);
  }
</style>