import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _charCounterComputed, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn;
import { localized, msg } from "@lit/localize";
import { property, query, queryAsync } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import { nothing } from "lit/html.js";
import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-control-footer.component.js";
import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component.js";
import { gdsCustomElement, html } from "../../scoping.js";
import formControlHostStyles from "../../shared-styles/form-control-host.style.js";
import { tokens } from "../../tokens.style.js";
import { watch } from "../../utils/decorators/watch.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsButton } from "../button/button.component.js";
import { GdsFlex } from "../flex/flex.component.js";
import { GdsFormControlElement } from "../form/form-control.js";
import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
import { charCounterCallbackDefault } from "../textarea/textarea.component.js";
import InputStyles from "./input.styles.js";
let Input = class extends GdsFormControlElement {
  constructor() {
    super();
    __privateAdd(this, _Input_instances);
    this.supportingText = "";
    this.showExtendedSupportingText = false;
    this.clearable = false;
    this.maxlength = Number.MAX_SAFE_INTEGER;
    this.size = "large";
    this.plain = false;
    this.type = "text";
    this.autocapitalize = "off";
    this.autocorrect = false;
    this.autofocus = false;
    this.spellcheck = true;
    this.charCounterCallback = charCounterCallbackDefault;
    __privateAdd(this, _charCounterComputed, this.charCounterCallback(this));
    __privateAdd(this, _handleOnInput, (e) => {
      const element = e.target;
      this.value = element.value;
    });
    __privateAdd(this, _handleOnChange, (e) => {
      const element = e.target;
      this.value = element.value;
      this.dispatchStandardEvent("change", {
        bubbles: true,
        composed: true
      });
    });
    __privateAdd(this, _handleFieldClick, () => {
      this.elInputAsync.then((el) => el.focus());
    });
    __privateAdd(this, _handleClearBtnClick, () => {
      this.value = "";
      this.dispatchCustomEvent("gds-input-cleared", {
        bubbles: true,
        composed: true
      });
      this.dispatchStandardEvent("input", {
        bubbles: true,
        composed: true
      });
    });
    this.value = "";
  }
  /**
   * Move focus to the input element.
   */
  focus(options) {
    this._getValidityAnchor()?.focus(options);
  }
  /**
   * Selects all the text in the input element.
   */
  select() {
    this._getValidityAnchor()?.select();
  }
  /**
   * Sets the value of the input element, replacing a range of text.
   */
  setRangeText(...args) {
    this._getValidityAnchor()?.setRangeText(...args);
    this.value = this._getValidityAnchor()?.value || "";
  }
  /**
   * Sets the start and end positions of a selection in the input element.
   */
  setSelectionRange(...args) {
    this._getValidityAnchor()?.setSelectionRange(...args);
  }
  /**
   * Opens the browser's picker interface for inputs that support it (e.g., date picker for date inputs).
   */
  showPicker() {
    this._getValidityAnchor()?.showPicker();
  }
  /**
   * Decreases the value of the input element by the specified step.
   */
  stepDown(n) {
    this._getValidityAnchor()?.stepDown(n);
  }
  /**
   * Increases the value of the input element by the specified step.
   */
  stepUp(n) {
    this._getValidityAnchor()?.stepUp(n);
  }
  /** The position of the start of the current text selection in the input element. */
  get selectionStart() {
    return this._getValidityAnchor()?.selectionStart;
  }
  /** Sets the position of the start of the current text selection in the input element. */
  set selectionStart(value) {
    const anchor = this._getValidityAnchor();
    if (anchor) {
      anchor.selectionStart = value;
    }
  }
  /** The position of the end of the current text selection in the input element. */
  get selectionEnd() {
    return this._getValidityAnchor()?.selectionEnd;
  }
  /** Sets the position of the end of the current text selection in the input element. */
  set selectionEnd(value) {
    const anchor = this._getValidityAnchor();
    if (anchor) {
      anchor.selectionEnd = value;
    }
  }
  /** The direction of the current text selection in the input element. */
  get selectionDirection() {
    return this._getValidityAnchor()?.selectionDirection;
  }
  /** Sets the direction of the current text selection in the input element. */
  set selectionDirection(value) {
    const anchor = this._getValidityAnchor();
    if (anchor) {
      anchor.selectionDirection = value;
    }
  }
  /**
   * A reference to the clear button element. Returns null if there is no clear button.
   * Intended for use in integration tests.
   */
  test_getClearButton() {
    return this.shadowRoot?.querySelector("#clear-button");
  }
  /**
   * A reference to the field element. This does not refer to the input element itself,
   * but the wrapper that makes up the visual field.
   * Intended for use in integration tests.
   */
  test_getFieldElement() {
    return this.shadowRoot?.querySelector("#field");
  }
  render() {
    return html`
      ${when(
      !this.plain,
      () => html`<gds-form-control-header class="size-${this.size}">
            <label for="input" slot="label">${this.label}</label>
            <span slot="supporting-text" id="supporting-text">
              ${this.supportingText}
            </span>
            <slot
              name="extended-supporting-text"
              slot="extended-supporting-text"
            ></slot>
          </gds-form-control-header>`
    )}
      <gds-field-base
        .size=${this.size}
        .disabled=${this.disabled}
        .invalid=${this.invalid}
        @click=${__privateGet(this, _handleFieldClick)}
        id="field"
      >
        ${__privateMethod(this, _Input_instances, renderFieldContents_fn).call(this)}
      </gds-field-base>
      ${when(
      __privateMethod(this, _Input_instances, shouldShowFooter_fn).call(this),
      () => html` <gds-form-control-footer
            id="message"
            class="size-${this.size}"
            .charCounter=${__privateGet(this, _charCounterComputed)}
            .errorMessage=${this.invalid ? this.errorMessage : void 0}
          ></gds-form-control-footer>`
    )}
    `;
  }
  _handleValueChange() {
    __privateSet(this, _charCounterComputed, this.charCounterCallback(this));
  }
  _getValidityAnchor() {
    return this.elInput;
  }
};
_charCounterComputed = new WeakMap();
_Input_instances = new WeakSet();
shouldShowFooter_fn = function() {
  return !this.plain;
};
_handleOnInput = new WeakMap();
_handleOnChange = new WeakMap();
_handleFieldClick = new WeakMap();
_handleClearBtnClick = new WeakMap();
renderFieldContents_fn = function() {
  const elements = [
    __privateMethod(this, _Input_instances, renderSlotLead_fn).call(this),
    __privateMethod(this, _Input_instances, renderNativeInput_fn).call(this),
    __privateMethod(this, _Input_instances, renderClearButton_fn).call(this),
    __privateMethod(this, _Input_instances, renderSlotTrail_fn).call(this)
  ];
  return elements.map((element) => html`${element}`);
};
renderSlotLead_fn = function() {
  return html` <slot slot="lead" name="lead"></slot> `;
};
renderSlotTrail_fn = function() {
  return html`<slot slot="trail" name="trail"></slot>`;
};
renderNativeInput_fn = function() {
  return html`
      <input
        class="native-control"
        @input=${__privateGet(this, _handleOnInput)}
        @change=${__privateGet(this, _handleOnChange)}
        .value=${this.value}
        id="input"
        ?disabled=${this.disabled}
        aria-describedby="supporting-text extended-supporting-text sub-label message"
        aria-invalid=${this.invalid}
        aria-errormessage="message"
        aria-label=${this.plain && this.label || nothing}
        placeholder=" "
        type=${this.type}
        min=${ifDefined(this.min)}
        max=${ifDefined(this.max)}
        step=${ifDefined(this.step)}
        autocapitalize=${ifDefined(this.autocapitalize)}
        autocomplete=${ifDefined(this.autocomplete)}
        autocorrect=${ifDefined(this.autocorrect)}
        ?autofocus=${this.autofocus}
        spellcheck=${this.spellcheck}
        enterkeyhint=${ifDefined(this.enterkeyhint)}
        inputmode=${ifDefined(this.inputmode)}
        ?required=${this.required}
      />
    `;
};
renderClearButton_fn = function() {
  if (this.clearable && (this.value?.length || 0) > 0)
    return html`<gds-button
        size="${this.size === "small" ? "xs" : "small"}"
        rank="tertiary"
        variant="${ifDefined(this.invalid ? "negative" : void 0)}"
        ?disabled="${this.disabled}"
        label="${msg("Clear input")}"
        @click=${__privateGet(this, _handleClearBtnClick)}
        id="clear-button"
        slot="action"
      >
        <gds-icon-cross-small></gds-icon-cross-small>
      </gds-button>`;
  else return nothing;
};
Input.styles = [tokens, formControlHostStyles, InputStyles];
__decorateClass([
  property({ attribute: "supporting-text" })
], Input.prototype, "supportingText", 2);
__decorateClass([
  property({
    attribute: "show-extended-supporting-text",
    type: Boolean,
    reflect: true
  })
], Input.prototype, "showExtendedSupportingText", 2);
__decorateClass([
  property({ type: Boolean })
], Input.prototype, "clearable", 2);
__decorateClass([
  property({ type: Number })
], Input.prototype, "maxlength", 2);
__decorateClass([
  property({ reflect: true })
], Input.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean })
], Input.prototype, "plain", 2);
__decorateClass([
  property({ reflect: true })
], Input.prototype, "type", 2);
__decorateClass([
  property()
], Input.prototype, "min", 2);
__decorateClass([
  property()
], Input.prototype, "max", 2);
__decorateClass([
  property()
], Input.prototype, "step", 2);
__decorateClass([
  property()
], Input.prototype, "autocapitalize", 2);
__decorateClass([
  property({ type: Boolean })
], Input.prototype, "autocorrect", 2);
__decorateClass([
  property()
], Input.prototype, "autocomplete", 2);
__decorateClass([
  property({ type: Boolean })
], Input.prototype, "autofocus", 2);
__decorateClass([
  property()
], Input.prototype, "enterkeyhint", 2);
__decorateClass([
  property({
    type: Boolean,
    converter: {
      // Allow "true|false" attribute values but keep the property boolean
      fromAttribute: (value) => !value || value === "false" ? false : true,
      toAttribute: (value) => value ? "true" : "false"
    }
  })
], Input.prototype, "spellcheck", 2);
__decorateClass([
  property()
], Input.prototype, "inputmode", 2);
__decorateClass([
  property({ attribute: false })
], Input.prototype, "charCounterCallback", 2);
__decorateClass([
  queryAsync("input")
], Input.prototype, "elInputAsync", 2);
__decorateClass([
  query("input")
], Input.prototype, "elInput", 2);
__decorateClass([
  watch("value")
], Input.prototype, "_handleValueChange", 1);
Input = __decorateClass([
  localized()
], Input);
let GdsInput = class extends withSizeXProps(
  withMarginProps(withLayoutChildProps(Input))
) {
};
GdsInput = __decorateClass([
  gdsCustomElement("gds-input", {
    dependsOn: [
      GdsFormControlHeader,
      GdsFormControlFooter,
      GdsFieldBase,
      GdsFlex,
      GdsButton,
      IconCrossSmall
    ]
  })
], GdsInput);
export {
  GdsInput
};
