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 "./number-input-field.css.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.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 ObcNumberInputFieldTextAlign = /* @__PURE__ */ ((ObcNumberInputFieldTextAlign2) => {
  ObcNumberInputFieldTextAlign2["Center"] = "center";
  ObcNumberInputFieldTextAlign2["Right"] = "right";
  ObcNumberInputFieldTextAlign2["RightUnitOutside"] = "right-unit-outside";
  return ObcNumberInputFieldTextAlign2;
})(ObcNumberInputFieldTextAlign || {});
var ObcNumberInputFieldSize = /* @__PURE__ */ ((ObcNumberInputFieldSize2) => {
  ObcNumberInputFieldSize2["Regular"] = "regular";
  ObcNumberInputFieldSize2["Large"] = "large";
  return ObcNumberInputFieldSize2;
})(ObcNumberInputFieldSize || {});
var ObcNumberInputFieldPlacement = /* @__PURE__ */ ((ObcNumberInputFieldPlacement2) => {
  ObcNumberInputFieldPlacement2["Left"] = "left";
  ObcNumberInputFieldPlacement2["Center"] = "center";
  ObcNumberInputFieldPlacement2["Right"] = "right";
  return ObcNumberInputFieldPlacement2;
})(ObcNumberInputFieldPlacement || {});
let ObcNumberInputField = class extends LitElement {
  constructor() {
    super(...arguments);
    this.value = "";
    this.unit = "";
    this.placeholder = "";
    this.textAlign = "right";
    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.helperText = "";
    this.label = "";
    this.required = false;
    this.hasLabelIcon = false;
    this.labelPlacement = "left";
    this.hasHelperIcon = false;
    this.helperPlacement = "left";
    this.squared = 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;
  }
  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;
    }
  }
  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>`;
  }
  render() {
    const hasHelperOrError = Boolean(this.helperText) || Boolean(this.error && this.errorText);
    const unitInside = this.unit && this.textAlign !== "right-unit-outside";
    const unitOutside = this.unit && this.textAlign === "right-unit-outside";
    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),
      squared: this.squared
    })}
      >
        ${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="text"
                inputmode="decimal"
                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}
              />
              ${unitInside ? html`<span class="unit-text">${this.unit}</span>` : nothing}
            </div>
          </div>
          ${unitOutside ? html`<span class="unit-text external">${this.unit}</span>` : nothing}
        </div>

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