@hakit/components
Version:
A series of components to work with @hakit/core
114 lines (113 loc) • 15.4 kB
JavaScript
import { a, j as e } from "../../../emotion-react-jsx-runtime.browser.esm-BErL7L7Y.js";
import { c as W } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { useState as p, useRef as g, useEffect as m } from "react";
import { Icon as E } from "@iconify/react";
import { useHass as Y } from "@hakit/core";
function A() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const J = /* @__PURE__ */ W("div", process.env.NODE_ENV === "production" ? {
target: "eljae2g0"
} : {
target: "eljae2g0",
label: "TextFieldBase"
})(process.env.NODE_ENV === "production" ? {
name: "w9zp4k",
styles: "--padding-horizontal:14px;--padding-horizontal-icon:8px;--padding-vertical:16px;--floating-label-padding-horizontal:4px;--margin-vertical:16px;--transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);--transition-duration:0.4s;--border-width:1px;--border-width-active:2px;--icon-size:24px;--icon-margin:12px;--border-radius:4px;--font-size:16;--label-font-size-active:12;--label-scale-factor:calc(var(--label-font-size-active) / var(--font-size));--label-scale-width:calc((100% - var(--padding-horizontal) * 2 - var(--floating-label-padding-horizontal)) / var(--label-scale-factor));margin:var(--margin-vertical) 0;&:disabled,&.disabled{cursor:not-allowed;opacity:0.8;}.field-wrapper{align-items:center;display:flex;flex-direction:row;position:relative;}.field-wrapper input,.field-wrapper label{font-size:calc(var(--font-size) * 1px);}.field-wrapper input{background:transparent;border:none;color:var(--ha-S200-contrast);padding:var(--padding-vertical) var(--padding-horizontal);outline:none;width:100%;}.field-wrapper input:-moz-ui-invalid{box-shadow:none!important;}.field-wrapper i{color:var(--ha-S200-contrast);margin:0 var(--icon-margin);pointer-events:none;width:var(--icon-size);}.field-wrapper label{color:var(--ha-S400-contrast);pointer-events:none;}.field-wrapper label.floating{left:var(--padding-horizontal);line-height:calc((var(--label-font-size-active) * 1px) * 1.45);max-width:calc(100% - var(--padding-horizontal) * 2);overflow:hidden;position:absolute;text-overflow:ellipsis;transition-duration:var(--transition-duration);transform-origin:0 0;transition-property:color,font-size,padding,transform,max-width,left;transition-timing-function:var(--transition-timing-function);white-space:nowrap;}.field-wrapper label.reference{max-width:var(--label-scale-width);padding:0 var(--floating-label-padding-horizontal) 0 0;transform:scale3d(var(--label-scale-factor), var(--label-scale-factor), 1);}.field-wrapper._leading-icon,.field-wrapper._trailing-icon label.floating:not(.reference){max-width:calc(100% - var(--icon-size) + (var(--icon-margin) * 2) + var(--padding-horizontal));}.field-wrapper._leading-icon._trailing-icon label.floating:not(.reference){max-width:calc(100% - ((var(--icon-size) + (var(--icon-margin) * 2)) * 2));}.field-wrapper._leading-icon input{padding-left:0;}.field-wrapper._leading-icon label.floating:not(.reference){left:calc(var(--icon-size) + (var(--icon-margin) * 2));}.field-wrapper._trailing-icon input{padding-right:0;}.borders{display:flex;flex-direction:row;height:100%;pointer-events:none;position:absolute;width:100%;}.borders .border{border-color:var(--ha-S300);border-style:solid;transition-duration:var(--transition-duration);transition-property:border-color,width;transition-timing-function:var(--transition-timing-function);}.borders .middle{display:flex;flex:1 1 auto;flex-direction:column;}.borders .middle .top-borders{display:flex;flex-direction:row;justify-content:space-between;}.borders .middle .top-borders .border{border-width:var(--border-width) 0 0;flex:unset;}.borders .middle .top-borders .border.start{width:calc(var(--label-active-width) / 2);}.borders .middle .border{flex:1 1 auto;width:100%;}.borders .middle .border.bottom{border-width:0 0 var(--border-width) 0;}.borders .left,.borders .right{width:calc(var(--padding-horizontal) - var(--floating-label-padding-horizontal) - var(--border-width));}.borders .left{border-radius:var(--border-radius) 0 0 var(--border-radius);border-width:var(--border-width) 0 var(--border-width) var(--border-width);}.borders .right{border-radius:0 var(--border-radius) var(--border-radius) 0;border-width:var(--border-width) var(--border-width) var(--border-width) 0;}.field-wrapper._floating-label._focused .borders .top-borders .start,.field-wrapper._floating-label._has-value .borders .top-borders .start{width:0;}.field-wrapper._floating-label._focused .borders .top-borders .end,.field-wrapper._floating-label._has-value .borders .top-borders .end{width:calc(100% - var(--label-active-width, 0) - var(--floating-label-padding-horizontal));}.field-wrapper._floating-label._focused label.floating:not(.reference),.field-wrapper._floating-label._has-value label.floating:not(.reference){left:var(--padding-horizontal);max-width:var(--label-scale-width);padding:0 var(--floating-label-padding-horizontal) 0 0;transform:translate3d(0, calc(-100% - var(--label-font-size-active) * 0.5px), 0) scale3d(var(--label-scale-factor), var(--label-scale-factor), 1);}.field-wrapper._focused label.floating{color:var(--ha-300);}.field-wrapper._focused .borders .top-borders .border{border-width:var(--border-width-active) 0 0;}.field-wrapper._focused .borders .border{border-color:var(--ha-300);}.field-wrapper._focused .borders .border.bottom{border-width:0 0 var(--border-width-active) 0;}.field-wrapper._focused .borders .border.left{border-width:var(--border-width-active) 0 var(--border-width-active) var(--border-width-active);}.field-wrapper._focused .borders .border.right{border-width:var(--border-width-active) var(--border-width-active) var(--border-width-active) 0;}.field-wrapper._invalid .borders .border{border-color:var(--ha-alert-error-color);}.field-wrapper._invalid label.floating{color:var(--ha-alert-error-color);}.hints{color:var(--ha-S400-contrast);display:flex;flex-direction:row;font-size:12px;margin:4px 12px 0 12px;}.hints .messages{flex:1 1 auto;}.hints .error{color:var(--ha-alert-error-color);}.hints .char-counter{margin:0 0 0 12px;}"
} : {
name: "w9zp4k",
styles: "--padding-horizontal:14px;--padding-horizontal-icon:8px;--padding-vertical:16px;--floating-label-padding-horizontal:4px;--margin-vertical:16px;--transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);--transition-duration:0.4s;--border-width:1px;--border-width-active:2px;--icon-size:24px;--icon-margin:12px;--border-radius:4px;--font-size:16;--label-font-size-active:12;--label-scale-factor:calc(var(--label-font-size-active) / var(--font-size));--label-scale-width:calc((100% - var(--padding-horizontal) * 2 - var(--floating-label-padding-horizontal)) / var(--label-scale-factor));margin:var(--margin-vertical) 0;&:disabled,&.disabled{cursor:not-allowed;opacity:0.8;}.field-wrapper{align-items:center;display:flex;flex-direction:row;position:relative;}.field-wrapper input,.field-wrapper label{font-size:calc(var(--font-size) * 1px);}.field-wrapper input{background:transparent;border:none;color:var(--ha-S200-contrast);padding:var(--padding-vertical) var(--padding-horizontal);outline:none;width:100%;}.field-wrapper input:-moz-ui-invalid{box-shadow:none!important;}.field-wrapper i{color:var(--ha-S200-contrast);margin:0 var(--icon-margin);pointer-events:none;width:var(--icon-size);}.field-wrapper label{color:var(--ha-S400-contrast);pointer-events:none;}.field-wrapper label.floating{left:var(--padding-horizontal);line-height:calc((var(--label-font-size-active) * 1px) * 1.45);max-width:calc(100% - var(--padding-horizontal) * 2);overflow:hidden;position:absolute;text-overflow:ellipsis;transition-duration:var(--transition-duration);transform-origin:0 0;transition-property:color,font-size,padding,transform,max-width,left;transition-timing-function:var(--transition-timing-function);white-space:nowrap;}.field-wrapper label.reference{max-width:var(--label-scale-width);padding:0 var(--floating-label-padding-horizontal) 0 0;transform:scale3d(var(--label-scale-factor), var(--label-scale-factor), 1);}.field-wrapper._leading-icon,.field-wrapper._trailing-icon label.floating:not(.reference){max-width:calc(100% - var(--icon-size) + (var(--icon-margin) * 2) + var(--padding-horizontal));}.field-wrapper._leading-icon._trailing-icon label.floating:not(.reference){max-width:calc(100% - ((var(--icon-size) + (var(--icon-margin) * 2)) * 2));}.field-wrapper._leading-icon input{padding-left:0;}.field-wrapper._leading-icon label.floating:not(.reference){left:calc(var(--icon-size) + (var(--icon-margin) * 2));}.field-wrapper._trailing-icon input{padding-right:0;}.borders{display:flex;flex-direction:row;height:100%;pointer-events:none;position:absolute;width:100%;}.borders .border{border-color:var(--ha-S300);border-style:solid;transition-duration:var(--transition-duration);transition-property:border-color,width;transition-timing-function:var(--transition-timing-function);}.borders .middle{display:flex;flex:1 1 auto;flex-direction:column;}.borders .middle .top-borders{display:flex;flex-direction:row;justify-content:space-between;}.borders .middle .top-borders .border{border-width:var(--border-width) 0 0;flex:unset;}.borders .middle .top-borders .border.start{width:calc(var(--label-active-width) / 2);}.borders .middle .border{flex:1 1 auto;width:100%;}.borders .middle .border.bottom{border-width:0 0 var(--border-width) 0;}.borders .left,.borders .right{width:calc(var(--padding-horizontal) - var(--floating-label-padding-horizontal) - var(--border-width));}.borders .left{border-radius:var(--border-radius) 0 0 var(--border-radius);border-width:var(--border-width) 0 var(--border-width) var(--border-width);}.borders .right{border-radius:0 var(--border-radius) var(--border-radius) 0;border-width:var(--border-width) var(--border-width) var(--border-width) 0;}.field-wrapper._floating-label._focused .borders .top-borders .start,.field-wrapper._floating-label._has-value .borders .top-borders .start{width:0;}.field-wrapper._floating-label._focused .borders .top-borders .end,.field-wrapper._floating-label._has-value .borders .top-borders .end{width:calc(100% - var(--label-active-width, 0) - var(--floating-label-padding-horizontal));}.field-wrapper._floating-label._focused label.floating:not(.reference),.field-wrapper._floating-label._has-value label.floating:not(.reference){left:var(--padding-horizontal);max-width:var(--label-scale-width);padding:0 var(--floating-label-padding-horizontal) 0 0;transform:translate3d(0, calc(-100% - var(--label-font-size-active) * 0.5px), 0) scale3d(var(--label-scale-factor), var(--label-scale-factor), 1);}.field-wrapper._focused label.floating{color:var(--ha-300);}.field-wrapper._focused .borders .top-borders .border{border-width:var(--border-width-active) 0 0;}.field-wrapper._focused .borders .border{border-color:var(--ha-300);}.field-wrapper._focused .borders .border.bottom{border-width:0 0 var(--border-width-active) 0;}.field-wrapper._focused .borders .border.left{border-width:var(--border-width-active) 0 var(--border-width-active) var(--border-width-active);}.field-wrapper._focused .borders .border.right{border-width:var(--border-width-active) var(--border-width-active) var(--border-width-active) 0;}.field-wrapper._invalid .borders .border{border-color:var(--ha-alert-error-color);}.field-wrapper._invalid label.floating{color:var(--ha-alert-error-color);}.hints{color:var(--ha-S400-contrast);display:flex;flex-direction:row;font-size:12px;margin:4px 12px 0 12px;}.hints .messages{flex:1 1 auto;}.hints .error{color:var(--ha-alert-error-color);}.hints .char-counter{margin:0 0 0 12px;}",
toString: A
}), er = ({
type: C = "text",
value: b = "",
errorMessage: j = null,
label: i,
placeholder: x,
leadingIcon: f,
trailingIcon: v,
minLength: F,
maxLength: h,
min: R,
max: k,
helperText: l,
charCounter: V,
inputProps: O,
className: B,
disabled: z,
...D
}) => {
const w = Y((r) => r.windowContext) ?? window, [_, y] = p(!1), [n, N] = p(b), [s, I] = p(j), [t, S] = p(!0), d = g(null), u = g(null), o = g(null), c = () => {
if (u.current && d.current) {
const r = u.current.getBoundingClientRect();
d.current.style.setProperty("--label-active-width", `${r.width}px`);
} else d.current && d.current.style.setProperty("--label-active-width", "0px");
};
m(() => (c(), w.addEventListener("resize", c), () => {
w.removeEventListener("resize", c);
}), [w]);
const M = () => {
o.current?.focus();
}, P = () => {
y(!0), c();
}, T = () => {
y(!1);
}, $ = (r) => {
N(r.target.value), H();
}, H = () => {
o.current && S(o.current.checkValidity());
}, L = () => {
const r = [];
return i && r.push("_floating-label"), f && r.push("_leading-icon"), v && r.push("_trailing-icon"), t || r.push("_invalid"), n && r.push("_has-value"), _ && r.push("_focused"), z && r.push("disabled"), r.join(" ");
}, q = () => s || l || V, G = (r) => {
o.current && (o.current.setCustomValidity(r), S(!1), I(r));
};
return m(() => {
N(b);
}, [b]), m(() => {
t || G("This field is required");
}, [t]), /* @__PURE__ */ a(J, { className: `outline-input ${B ?? ""}`, ...D, ref: d, children: [
/* @__PURE__ */ a("div", { className: `field-wrapper ${L()}`, onClick: M, children: [
i ? /* @__PURE__ */ e("label", { className: "floating", children: i }) : null,
i ? /* @__PURE__ */ e("label", { ref: u, className: "floating reference", style: {
opacity: 0,
pointerEvents: "none",
visibility: "hidden",
zIndex: -9999999999
}, children: i }) : null,
f ? /* @__PURE__ */ e(E, { className: "icon leading", icon: f, style: {
color: "var(--ha-500-contrast)"
} }) : null,
/* @__PURE__ */ e("input", { ref: o, type: C, minLength: F, maxLength: h, min: R, max: k, placeholder: x, value: n || "", onChange: $, onFocus: P, onBlur: T, disabled: z, ...O }),
v ? /* @__PURE__ */ e(E, { className: "icon trailing", icon: v, style: {
color: "var(--ha-500-contrast)"
} }) : null,
/* @__PURE__ */ a("div", { className: "borders", children: [
/* @__PURE__ */ e("div", { className: "border left" }),
/* @__PURE__ */ a("div", { className: "middle", children: [
/* @__PURE__ */ a("div", { className: "top-borders", children: [
/* @__PURE__ */ e("div", { className: "border start" }),
/* @__PURE__ */ e("div", { className: "border end" })
] }),
/* @__PURE__ */ e("div", { className: "border bottom" })
] }),
/* @__PURE__ */ e("div", { className: "border right" })
] })
] }),
q() ? /* @__PURE__ */ a("div", { className: "hints", children: [
s || l ? /* @__PURE__ */ a("div", { className: "messages", children: [
!t && s ? /* @__PURE__ */ e("div", { className: "error", children: s }) : null,
t && l ? /* @__PURE__ */ e("div", { className: "helper", children: l }) : null
] }) : null,
h ? /* @__PURE__ */ a("div", { className: "char-counter", children: [
n ? n.length : 0,
"/",
h
] }) : null
] }) : null
] });
};
export {
er as TextField
};
//# sourceMappingURL=TextField.js.map