text: import { r as registerInstance, h, H as Host, g as getElement } from './index-83f2275b.js';
  import '@aws-amplify/core';
  import './auth-types-78df304e.js';
  import '@aws-amplify/auth';
  import './Translations-c833f663.js';
  import './constants-d1abe7de.js';
  import { e as closestElement, o as onAuthUIStateChange } from './helpers-82822fb2.js';
  
  const amplifyFormFieldCss = "amplify-form-field{--label-font-size:var(--amplify-text-md);--description-font-size:var(--amplify-text-sm)}.form-field{margin-bottom:15px}.form-field-label{display:block;font-size:var(--label-font-size);padding-bottom:0.5em}.form-field-description{font-size:var(--description-font-size);padding-top:0.5em}";
  
  const AmplifyFormField = class {
      constructor(hostRef) {
          registerInstance(this, hostRef);
          /** The input type.  Can be any HTML input type. */
          this.type = 'text';
          /** The required flag in order to make an input required prior to submitting a form */
          this.required = false;
          /** (Optional) The placeholder for the input element.  Using hints is recommended, but placeholders can also be useful to convey information to users. */
          this.placeholder = '';
      }
      render() {
          return (h("div", { class: "form-field" }, this.label && (h("div", { class: "form-field-label" }, h("amplify-label", { htmlFor: this.fieldId }, this.label))), this.description && (h("div", { id: `${this.fieldId}-description`, class: "form-field-description", "data-test": "form-field-description" }, this.description)), h("div", null, h("slot", { name: "input" }, h("amplify-input", { fieldId: this.fieldId, description: this.description, type: this.type, handleInputChange: this.handleInputChange, placeholder: this.placeholder, name: this.name, value: this.value, inputProps: this.inputProps, disabled: this.disabled }))), this.hint && (h("amplify-hint", { id: `${this.fieldId}-hint` }, this.hint))));
      }
  };
  AmplifyFormField.style = amplifyFormFieldCss;
  
  const amplifyHintCss = ":host{--color:var(--amplify-grey);--font-family:var(--amplify-font-family);--font-size:var(--amplify-text-xs);--font-weight:var(--amplify-font-weight)}.hint{color:var(--color);font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);margin-bottom:2.625rem}";
  
  const AmplifyHint = class {
      constructor(hostRef) {
          registerInstance(this, hostRef);
      }
      render() {
          return (h("div", { class: "hint" }, h("slot", null)));
      }
  };
  AmplifyHint.style = amplifyHintCss;
  
  const amplifyInputCss = "amplify-input{--color:var(--amplify-secondary-color);--background-color:var(--amplify-secondary-contrast);--border-color:var(--amplify-light-grey);--border-color-focus:var(--amplify-primary-color);--border:1px solid var(--border-color);--margin:0 0 0.625rem 0}[data-autocompleted]{background-color:#e8f0fe !important}.input-host{width:100%}.input{display:block;width:100%;padding:1rem;font-size:var(--amplify-text-sm);color:var(--color);background-color:var(--background-color);background-image:none;border:var(--border);border-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:var(--margin);height:3.125rem;line-height:1.1;-webkit-box-shadow:none;box-shadow:none}.input:focus{outline:none;border-color:var(--border-color-focus)}.input:disabled{opacity:0.5}";
  
  const AmplifyInput = class {
      constructor(hostRef) {
          registerInstance(this, hostRef);
          /** The input type.  Can be any HTML input type. */
          this.type = 'text';
          /** The callback, called when the input is modified by the user. */
          this.handleInputChange = () => void 0;
          /** (Optional) The placeholder for the input element.  Using hints is recommended, but placeholders can also be useful to convey information to users. */
          this.placeholder = '';
          /** Whether the input has been autocompleted */
          this.autoCompleted = false;
      }
      /**
       * Sets the value of this input to the value in autofill input event.
       */
      setAutoCompleteValue(value) {
          const input = this.el.querySelector('input');
          if (!input)
              return;
          input.value = value;
          // dispatch an input event from this element to the parent form
          input.dispatchEvent(new Event('input'));
          this.autoCompleted = true;
      }
      /**
       * Checks if the target dummy input in `amplify-auth-container` is present have been autofilled.
       * If so, we update this.value with the autofilled value.
       */
      checkAutoCompletion(targetInput) {
          if (!targetInput)
              return;
          if (targetInput.value) {
              // if value is already set, we set the value directly
              this.setAutoCompleteValue(targetInput.value);
          }
          else {
              // if value is not set, we start listening for it
              targetInput.addEventListener('input', e => {
                  const value = e.target.value;
                  this.setAutoCompleteValue(value);
              });
          }
      }
      disconnectedCallback() {
          this.removeHubListener && this.removeHubListener(); // stop listening to `onAuthUIStateChange`
      }
      componentWillLoad() {
          // the below behaviors are only applicable if `amplify-input` is used by `amplify-authenticator`.
          if (!closestElement('amplify-authenticator', this.el))
              return;
          this.removeHubListener = onAuthUIStateChange(() => {
              /**
               * When we're using slots, autofilled data will persist between different authState,
               * even though input events are not triggered. This ends up in parent components
               * not picking up input values. For now, we're emptying the input on authState change
               * which is the existing behavior.
               */
              const input = this.el.querySelector('input');
              if (input)
                  input.value = '';
              this.autoCompleted = false;
          });
      }
      componentDidLoad() {
          // no-op if this field already has been autofilled or already has an value
          if (this.autoCompleted || this.value)
              return;
          if (/Firefox/.test(navigator.userAgent))
              return; // firefox autofill works
          const container = closestElement('amplify-auth-container', this.el);
          const signIn = closestElement('amplify-sign-in', this.el);
          // only autocomplete if `amplify-auth-container` is present and input is under `sign-in`.
          if (!container || !signIn)
              return;
          const username = container.querySelector("input[name='username']");
          const password = container.querySelector("input[name='password']");
          if (this.name === 'username' ||
              this.name === 'email' ||
              this.name === 'phone') {
              this.checkAutoCompletion(username);
          }
          else if (this.name === 'password') {
              this.checkAutoCompletion(password);
          }
      }
      render() {
          return (h(Host, { class: "input-host" }, h("input", Object.assign({ id: this.fieldId, "aria-describedby": this.fieldId && this.description
                  ? `${this.fieldId}-description`
                  : null, "data-autocompleted": this.autoCompleted, type: this.type, onInput: event => {
                  this.autoCompleted = false;
                  this.handleInputChange(event);
              }, placeholder: this.placeholder, name: this.name, class: "input", value: this.value, disabled: this.disabled }, this.inputProps))));
      }
      get el() { return getElement(this); }
  };
  AmplifyInput.style = amplifyInputCss;
  
  const amplifyLabelCss = ":host{--label-color:var(--amplify-secondary-color)}.label{color:var(--label-color);font-size:var(--amplify-text-sm);margin-bottom:16px}";
  
  const AmplifyLabel = class {
      constructor(hostRef) {
          registerInstance(this, hostRef);
      }
      render() {
          return (h("label", { class: "label", htmlFor: this.htmlFor }, h("slot", null)));
      }
  };
  AmplifyLabel.style = amplifyLabelCss;
  
  export { AmplifyFormField as amplify_form_field, AmplifyHint as amplify_hint, AmplifyInput as amplify_input, AmplifyLabel as amplify_label };
  