primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 2.48 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.floatlabel=function(e,t,l,a,n,o){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var a=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,a.get?a:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,Object.freeze(t)}var p=r(t),i=a.ComponentBase.extend({defaultProps:{__TYPE:"FloatLabel",children:void 0},css:{classes:{root:"p-float-label"},styles:"\n@layer primereact {\n .p-float-label {\n display: block;\n position: relative;\n }\n \n .p-float-label label {\n position: absolute;\n pointer-events: none;\n top: 50%;\n margin-top: -.5rem;\n transition-property: all;\n transition-timing-function: ease;\n line-height: 1;\n }\n \n .p-float-label:has(textarea) label {\n top: 1rem;\n }\n \n .p-float-label:has(input:focus) label,\n .p-float-label:has(input.p-filled) label,\n .p-float-label:has(input:-webkit-autofill) label,\n .p-float-label:has(textarea:focus) label,\n .p-float-label:has(textarea.p-filled) label,\n .p-float-label:has(.p-inputwrapper-focus) label,\n .p-float-label:has(.p-inputwrapper-filled) label {\n top: -.75rem;\n font-size: 12px;\n }\n \n .p-float-label .p-placeholder,\n .p-float-label input::placeholder,\n .p-float-label .p-inputtext::placeholder {\n opacity: 0;\n transition-property: all;\n transition-timing-function: ease;\n }\n \n .p-float-label .p-focus .p-placeholder,\n .p-float-label input:focus::placeholder,\n .p-float-label .p-inputtext:focus::placeholder {\n opacity: 1;\n transition-property: all;\n transition-timing-function: ease;\n }\n}"}}),s=p.memo(p.forwardRef((function(e,t){var r=n.useMergeProps(),s=p.useContext(l.PrimeReactContext),c=i.getProps(e,s),f=p.useRef(t),u=i.setMetaData({props:c}),b=u.ptm,m=u.cx;a.useHandleStyle(i.css.styles,u.isUnstyled,{name:"floatlabel"}),p.useEffect((function(){o.ObjectUtils.combinedRefs(f,t)}),[f,t]);var d=r({ref:f,className:o.classNames(m("root"))},i.getOtherProps(c),b("root"));return p.createElement("span",d,c.children)})));return s.displayName="FloatLabel",e.FloatLabel=s,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);