@hakit/components/dist/cjs/Shared/Form/TextField.js

A series of components to work with @hakit/core

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../emotion-react-jsx-runtime.browser.esm-D6BfYa4f.cjs"),H=require("../../../emotion-styled-base.browser.esm-BenTvX6I.cjs"),a=require("react"),y=require("@iconify/react"),L=require("@hakit/core");function G(){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=H.createStyled("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:G}),W=({type:j="text",value:p="",errorMessage:N=null,label:i,placeholder:u,leadingIcon:b,trailingIcon:f,minLength:S,maxLength:v,min:E,max:R,helperText:l,charCounter:C,inputProps:F,className:k,disabled:g,...q})=>{const h=L.useHass(e=>e.windowContext)??window,[m,x]=a.useState(!1),[n,_]=a.useState(p),[s,O]=a.useState(N),[t,z]=a.useState(!0),d=a.useRef(null),w=a.useRef(null),o=a.useRef(null),c=()=>{if(w.current&&d.current){const e=w.current.getBoundingClientRect();d.current.style.setProperty("--label-active-width",`${e.width}px`)}else d.current&&d.current.style.setProperty("--label-active-width","0px")};a.useEffect(()=>(c(),h.addEventListener("resize",c),()=>{h.removeEventListener("resize",c)}),[h]);const V=()=>{o.current?.focus()},B=()=>{x(!0),c()},T=()=>{x(!1)},I=e=>{_(e.target.value),M()},M=()=>{o.current&&z(o.current.checkValidity())},P=()=>{const e=[];return i&&e.push("_floating-label"),b&&e.push("_leading-icon"),f&&e.push("_trailing-icon"),t||e.push("_invalid"),n&&e.push("_has-value"),m&&e.push("_focused"),g&&e.push("disabled"),e.join(" ")},D=()=>s||l||C,$=e=>{o.current&&(o.current.setCustomValidity(e),z(!1),O(e))};return a.useEffect(()=>{_(p)},[p]),a.useEffect(()=>{t||$("This field is required")},[t]),r.jsxs(J,{className:`outline-input ${k??""}`,...q,ref:d,children:[r.jsxs("div",{className:`field-wrapper ${P()}`,onClick:V,children:[i?r.jsx("label",{className:"floating",children:i}):null,i?r.jsx("label",{ref:w,className:"floating reference",style:{opacity:0,pointerEvents:"none",visibility:"hidden",zIndex:-9999999999},children:i}):null,b?r.jsx(y.Icon,{className:"icon leading",icon:b,style:{color:"var(--ha-500-contrast)"}}):null,r.jsx("input",{ref:o,type:j,minLength:S,maxLength:v,min:E,max:R,placeholder:u,value:n||"",onChange:I,onFocus:B,onBlur:T,disabled:g,...F}),f?r.jsx(y.Icon,{className:"icon trailing",icon:f,style:{color:"var(--ha-500-contrast)"}}):null,r.jsxs("div",{className:"borders",children:[r.jsx("div",{className:"border left"}),r.jsxs("div",{className:"middle",children:[r.jsxs("div",{className:"top-borders",children:[r.jsx("div",{className:"border start"}),r.jsx("div",{className:"border end"})]}),r.jsx("div",{className:"border bottom"})]}),r.jsx("div",{className:"border right"})]})]}),D()?r.jsxs("div",{className:"hints",children:[s||l?r.jsxs("div",{className:"messages",children:[!t&&s?r.jsx("div",{className:"error",children:s}):null,t&&l?r.jsx("div",{className:"helper",children:l}):null]}):null,v?r.jsxs("div",{className:"char-counter",children:[n?n.length:0,"/",v]}):null]}):null]})};exports.TextField=W;
//# sourceMappingURL=TextField.js.map