import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state, query } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import componentStyle from "./text-input-field.css.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import "../icon-button/icon-button.js";
import "../../icons/icon-close-google.js";
import "../../icons/icon-visibility-on-google.js";
import "../../icons/icon-visibility-off-google.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var HTMLInputTypeAttribute = /* @__PURE__ */ ((HTMLInputTypeAttribute2) => {
  HTMLInputTypeAttribute2["Text"] = "text";
  HTMLInputTypeAttribute2["Password"] = "password";
  HTMLInputTypeAttribute2["Email"] = "email";
  HTMLInputTypeAttribute2["Tel"] = "tel";
  HTMLInputTypeAttribute2["Url"] = "url";
  HTMLInputTypeAttribute2["Search"] = "search";
  HTMLInputTypeAttribute2["Date"] = "date";
  HTMLInputTypeAttribute2["Time"] = "time";
  return HTMLInputTypeAttribute2;
})(HTMLInputTypeAttribute || {});
var ObcTextInputFieldTextAlign = /* @__PURE__ */ ((ObcTextInputFieldTextAlign2) => {
  ObcTextInputFieldTextAlign2["Left"] = "left";
  ObcTextInputFieldTextAlign2["Center"] = "center";
  return ObcTextInputFieldTextAlign2;
})(ObcTextInputFieldTextAlign || {});
var ObcTextInputFieldSize = /* @__PURE__ */ ((ObcTextInputFieldSize2) => {
  ObcTextInputFieldSize2["Regular"] = "regular";
  ObcTextInputFieldSize2["Large"] = "large";
  return ObcTextInputFieldSize2;
})(ObcTextInputFieldSize || {});
var ObcTextInputFieldPlacement = /* @__PURE__ */ ((ObcTextInputFieldPlacement2) => {
  ObcTextInputFieldPlacement2["Left"] = "left";
  ObcTextInputFieldPlacement2["Center"] = "center";
  ObcTextInputFieldPlacement2["Right"] = "right";
  return ObcTextInputFieldPlacement2;
})(ObcTextInputFieldPlacement || {});
let ObcTextInputField = class extends LitElement {
  constructor() {
    super(...arguments);
    this.value = "";
    this.placeholder = "";
    this.type = "text";
    this.textAlign = "left";
    this.disabled = false;
    this.readonly = false;
    this.error = false;
    this.errorText = "";
    this.rejectUpdatesOnFocus = false;
    this.rejectUpdates = false;
    this.rejectDuplicateUpdates = false;
    this.name = "";
    this.size = "regular";
    this.hasLeadingIcon = false;
    this.hasClearButton = false;
    this.helperText = "";
    this.label = "";
    this.required = false;
    this.hasLabelIcon = false;
    this.labelPlacement = "left";
    this.hasHelperIcon = false;
    this.helperPlacement = "left";
    this.passwordVisible = false;
    this.hasFocus = false;
    this.previousValue = "";
    this.previousInputElementValue = "";
  }
  onInput(e) {
    this.value = e.target.value;
    this.previousInputElementValue = this.value;
  }
  onFocus() {
    this.hasFocus = true;
  }
  onBlur() {
    this.hasFocus = false;
  }
  handleClear(e) {
    e.stopPropagation();
    this.value = "";
    this.inputElement.value = "";
    this.dispatchEvent(
      new CustomEvent("clear", { bubbles: true, composed: true })
    );
    this.dispatchEvent(
      new InputEvent("input", { bubbles: true, composed: true })
    );
    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    this.inputElement?.focus();
  }
  togglePasswordVisibility(e) {
    e.stopPropagation();
    this.passwordVisible = !this.passwordVisible;
  }
  getInputMode() {
    switch (this.type) {
      case "tel":
        return "tel";
      case "email":
        return "email";
      case "url":
        return "url";
      case "search":
        return "search";
      default:
        return "text";
    }
  }
  renderFooterText(text, isError) {
    if (!text) return nothing;
    return html`<div
      id="helper-text"
      class=${classMap({
      [isError ? "error-text" : "helper-text"]: true,
      [`helper-placement-${this.helperPlacement}`]: true
    })}
    >
      ${this.hasHelperIcon ? html`<div class="helper-icon"><slot name="helper-icon"></slot></div>` : nothing}
      ${text}
    </div>`;
  }
  fireChangeEvent() {
    this.dispatchEvent(new CustomEvent("change"));
  }
  get shouldUpdateValue() {
    if (this.rejectUpdates) return false;
    if (this.rejectUpdatesOnFocus && this.hasFocus) return false;
    if (this.rejectDuplicateUpdates && this.value === this.previousValue) {
      return false;
    }
    return true;
  }
  willUpdate(changedProperties) {
    if (changedProperties.has("value") && !this.shouldUpdateValue && this.inputElement) {
      this.value = this.inputElement.value;
    }
  }
  updated() {
    if (this.rejectDuplicateUpdates && this.value !== this.previousValue && (this.previousInputElementValue !== this.value || !this.hasFocus)) {
      this.previousValue = this.value;
    }
  }
  render() {
    const hasHelperOrError = Boolean(this.helperText) || Boolean(this.error && this.errorText);
    const showClearButton = this.hasClearButton && this.value.length > 0 && !this.disabled;
    const isPasswordField = this.type === "password";
    const showPasswordToggle = isPasswordField && !this.disabled;
    const isClearButtonVisible = showClearButton && !showPasswordToggle;
    const effectiveType = isPasswordField && this.passwordVisible ? "text" : this.type;
    const hasTrailingButton = showPasswordToggle || isClearButtonVisible;
    let value = this.value;
    if (!this.shouldUpdateValue && this.inputElement) {
      value = this.inputElement.value;
    }
    return html`
      <label
        class=${classMap({
      wrapper: true,
      [`align-${this.textAlign}`]: true,
      [`size-${this.size}`]: true,
      error: this.error,
      disabled: this.disabled,
      helpertext: hasHelperOrError,
      haslabel: Boolean(this.label),
      "has-trailing-button": hasTrailingButton
    })}
      >
        ${this.label ? html`<div
              class=${classMap({
      "label-text-container": true,
      [`label-placement-${this.labelPlacement}`]: true
    })}
            >
              ${this.hasLabelIcon ? html`<div class="label-icon">
                    <slot name="label-icon"></slot>
                  </div>` : nothing}
              <span class="label-text">${this.label}</span>
              ${this.required ? html`<div class="required-indicator"></div>` : nothing}
            </div>` : nothing}

        <div class="horizontal-container">
          <div class="input-field-container">
            ${this.hasLeadingIcon ? html`<div class="leading-icon">
                  <slot name="leading-icon"></slot>
                </div>` : nothing}
            <div class="label-container">
              <input
                type=${effectiveType}
                inputmode=${this.getInputMode()}
                class="value-input"
                .value=${value}
                @focus=${this.onFocus}
                @blur=${this.onBlur}
                .placeholder=${this.placeholder}
                name=${ifDefined(this.name || void 0)}
                ?disabled=${this.disabled}
                ?readonly=${this.readonly}
                ?required=${this.required}
                maxlength=${ifDefined(this.maxlength)}
                minlength=${ifDefined(this.minlength)}
                aria-invalid=${this.error ? "true" : "false"}
                aria-describedby=${ifDefined(
      hasHelperOrError ? "helper-text" : void 0
    )}
                autocomplete="off"
                @input=${this.onInput}
                @change=${this.fireChangeEvent}
              />
            </div>
            ${showPasswordToggle ? html`<obc-icon-button
                  variant="flat"
                  class="trailing-icon-button"
                  @click=${this.togglePasswordVisibility}
                  aria-label=${this.passwordVisible ? "Hide password" : "Show password"}
                >
                  ${this.passwordVisible ? html`<obi-visibility-on-google></obi-visibility-on-google>` : html`<obi-visibility-off-google></obi-visibility-off-google>`}
                </obc-icon-button>` : nothing}
            ${isClearButtonVisible ? html`<obc-icon-button
                  variant="flat"
                  class="trailing-icon-button"
                  @click=${this.handleClear}
                  aria-label="Clear input"
                >
                  <obi-close-google></obi-close-google>
                </obc-icon-button>` : nothing}
          </div>
        </div>

        ${this.error && this.errorText ? this.renderFooterText(this.errorText, true) : this.renderFooterText(this.helperText, false)}
      </label>
    `;
  }
};
ObcTextInputField.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "value", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "placeholder", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "textAlign", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcTextInputField.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcTextInputField.prototype, "readonly", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcTextInputField.prototype, "error", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "errorText", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "rejectUpdatesOnFocus", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "rejectUpdates", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "rejectDuplicateUpdates", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "name", 2);
__decorateClass([
  property({ type: Number })
], ObcTextInputField.prototype, "maxlength", 2);
__decorateClass([
  property({ type: Number })
], ObcTextInputField.prototype, "minlength", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "hasClearButton", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "helperText", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "label", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "required", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "hasLabelIcon", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "labelPlacement", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTextInputField.prototype, "hasHelperIcon", 2);
__decorateClass([
  property({ type: String })
], ObcTextInputField.prototype, "helperPlacement", 2);
__decorateClass([
  state()
], ObcTextInputField.prototype, "passwordVisible", 2);
__decorateClass([
  state()
], ObcTextInputField.prototype, "hasFocus", 2);
__decorateClass([
  state()
], ObcTextInputField.prototype, "previousValue", 2);
__decorateClass([
  state()
], ObcTextInputField.prototype, "previousInputElementValue", 2);
__decorateClass([
  query(".value-input")
], ObcTextInputField.prototype, "inputElement", 2);
ObcTextInputField = __decorateClass([
  customElement("obc-text-input-field")
], ObcTextInputField);
export {
  HTMLInputTypeAttribute,
  ObcTextInputField,
  ObcTextInputFieldPlacement,
  ObcTextInputFieldSize,
  ObcTextInputFieldTextAlign
};
//# sourceMappingURL=text-input-field.js.map
