@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
90 lines (89 loc) • 3.96 kB
JavaScript
import { property as i } from "lit/decorators.js";
import { unsafeCSS as c, LitElement as u, html as a, nothing as d } from "lit";
import "../typography/register.mjs";
import { classMap as f } from "lit/directives/class-map.js";
import "../typography/typography.mjs";
const x = `:host{display:block;font-family:inherit;margin:var(--wolf-spacing-lg)}:host *{font-family:inherit}.text-field{position:relative;width:100%}.text-field.multiline{height:100%}input,textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;box-sizing:border-box}input:focus,textarea:focus{border-color:var(--wolf-focus-color, var(--wolf-color-text))}textarea{height:100%}input{height:calc(var(--wolf-spacing-md) * 7)}textarea{resize:vertical}input[disabled],textarea[disabled]{background-color:#f7f7f7;pointer-events:none;opacity:.5}.icon-start,.icon-end{position:absolute;top:50%;transform:translateY(-50%);padding:0 8px}.icon-start{left:0}.icon-end{right:0}.helper-text{font-size:12px;color:#888;margin-top:4px}label{display:block;margin-bottom:4px;font-weight:500}.icon-start~input,.icon-start~textarea{padding-left:32px}.icon-end~input,.icon-end~textarea{padding-right:32px}:host([size=small]) input{height:calc(var(--wolf-spacing-md) * 6)}:host([size=medium]) input{height:calc(var(--wolf-spacing-md) * 7)}:host([size=large]) input{height:calc(var(--wolf-spacing-md) * 8)}:host([stretch]){width:100%}
`;
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (n, t, r, s) => {
for (var l = s > 1 ? void 0 : s ? v(t, r) : t, p = n.length - 1, h; p >= 0; p--)
(h = n[p]) && (l = (s ? h(t, r, l) : h(l)) || l);
return s && l && m(t, r, l), l;
};
const S = "wolf-text-field";
class e extends u {
constructor() {
super(...arguments), this.disabled = !1, this.value = "", this.placeholder = "", this.type = "text", this.size = "medium", this.helperText = "", this.label = "", this.multiline = !1, this.stretch = !1;
}
updated(t) {
super.updated(t), t.has("value") && this.updateInputValue();
}
updateInputValue() {
const t = this.shadowRoot?.querySelector("input, textarea");
t && (t.value = this.value);
}
hasIconStart() {
return this.querySelector('[slot="icon-start"]');
}
hasIconEnd() {
return this.querySelector('[slot="icon-end"]');
}
handleInput(t) {
const r = t.target;
this.value = r.value;
}
render() {
return a`
${this.label ? a`<wolf-typography variant="header-xsmall">${this.label}</wolf-typography>` : ""}
<div class=${f({ "text-field": !0, multiline: this.multiline })}>
${this.hasIconStart() ? a`<div class="icon-start"><slot name="icon-start"></slot></div>` : d}
${this.hasIconEnd() ? a`<div class="icon-end"><slot name="icon-end"></slot></div>` : d}
${this.multiline ? a`<textarea
.value=${this.value}
.placeholder=${this.placeholder}
?disabled=${this.disabled}
=${this.handleInput}
></textarea>` : a`<input
type=${this.type}
.value=${this.value}
.placeholder=${this.placeholder}
?disabled=${this.disabled}
=${this.handleInput}
/>`}
</div>
${this.helperText ? a`<div class="helper-text">${this.helperText}</div>` : ""}
`;
}
}
e.styles = c(x);
o([
i({ type: Boolean, reflect: !0 })
], e.prototype, "disabled", 2);
o([
i({ type: String, reflect: !0 })
], e.prototype, "value", 2);
o([
i({ type: String })
], e.prototype, "placeholder", 2);
o([
i({ type: String })
], e.prototype, "type", 2);
o([
i()
], e.prototype, "size", 2);
o([
i({ type: String })
], e.prototype, "helperText", 2);
o([
i({ type: String })
], e.prototype, "label", 2);
o([
i({ type: Boolean })
], e.prototype, "multiline", 2);
o([
i({ type: Boolean })
], e.prototype, "stretch", 2);
export {
e as WolfTextField,
S as tagName
};