import { unsafeCSS, LitElement, html } from "lit";
import { property, customElement } from "lit/decorators.js";
import { g as getComponent, u as useBemm } from "./base-997857fe.js";
const styles = ".sil-text {\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  flex-direction: column-reverse;\n}\n.sil-text,\n.sil-text * {\n  box-sizing: border-box;\n}\n.sil-text__input {\n  background-color: var(--input-field--background-color, var(--background, transparent));\n  border-radius: var(--input-field--border-radius, var(--border-radius, 0.25em));\n  position: relative;\n  border: 2px solid var(--input-field--border-color, rgba(var(--foreground-r), var(--foreground-g), var(--foreground-b), 0.25));\n}\n.sil-text__input:has(:focus) {\n  outline: none;\n  border-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.5);\n}\n.sil-text__control {\n  width: 100%;\n  padding: var(--input-field--padding, 1em);\n  font-family: var(--input-field--font-family, 0.75em 1em);\n  font-size: 1em;\n  border: none;\n  color: var(--input-field--text-color, var(--foreground, #fff));\n  background-color: transparent;\n}\n.sil-text__control:focus {\n  outline: none;\n  border-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.5);\n}\n.sil-text__label {\n  padding: var(--input-field--label-padding, var(--input-field--padding, 0.75em 0em));\n}\n.sil-text__preview {\n  padding: var(--input-field--preview-opacity, 0.5);\n}";
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;
};
let Text = class extends LitElement {
  constructor() {
    super(...arguments);
    this.label = "";
    this.value = "";
    this.required = false;
    this.placeholder = "";
    this.preview = false;
  }
  handleChange(e) {
    this.value = e.target.value;
  }
  render() {
    const bemm = useBemm(getComponent("text"));
    return html`
      <div class="${bemm()}">
        ${this.preview ? `<div class="${bemm("preview")}">${this.value}</div>` : null}
        <div class="${bemm("input")}">
          <input
            type="text"
            class="${bemm("control")}"
            placeholder="${this.placeholder}"
            value="${this.value}"
            @input="${this.handleChange}"
          />
        </div>
        <label class="${bemm("label")}">${this.label}</label>
      </div>
    `;
  }
};
Text.styles = unsafeCSS(styles);
__decorateClass([
  property({ type: String })
], Text.prototype, "label", 2);
__decorateClass([
  property({ type: String })
], Text.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean })
], Text.prototype, "required", 2);
__decorateClass([
  property({ type: String })
], Text.prototype, "placeholder", 2);
__decorateClass([
  property({ type: Boolean })
], Text.prototype, "preview", 2);
Text = __decorateClass([
  customElement(getComponent("text"))
], Text);
export {
  Text
};
