Ratingssss.js

(()=>{"use strict";const e=[{type:"number",key:"numOfIcons",label:"Number of Icons",input:"true"},{type:"textfield",key:"filledColor",label:"Filled Color",input:"true"},{type:"textfield",key:"unfilledColor",label:"UnFilled Color",input:"true"},{type:"textfield",key:"iconHeight",label:"Icon Height",input:"true"},{type:"textfield",key:"iconWidth",label:"Icon Width",input:"true"},{type:"textarea",key:"icon",label:"Icon",input:!0},{key:"placeholder",ignore:!0}];function t(...t){return Formio.Components.baseEditForm([{key:"data",ignore:!0},{key:"display",components:e},{key:"validation",ignore:!0}],...t)}const n=Formio.Components.components.field;class i extends n{static schema(...e){return n.schema({type:"rating",label:"rating",key:"rating",unfilledColor:"#ddd",filledColor:"yellow",numOfIcons:"5",iconHeight:"25px",iconWidth:"25px",icon:'<svg ref="star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" \n                    \t viewBox="0 0 47.94 47.94" xml:space="preserve">\n                    <path d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757\n                    \tc2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042\n                    \tc0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685\n                    \tc-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528\n                    \tc-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956\n                    \tC22.602,0.567,25.338,0.567,26.285,2.486z"/>\n                </svg>'})}static get builderInfo(){return{title:"Rating",icon:"star",group:"basic",documentation:"/userguide/#textfield",weight:0,schema:i.schema()}}static editForm=t;setIconProperties(){const e=(new DOMParser).parseFromString(this.component.icon,"text/xml");console.log(e),e.firstChild.style.fill=this.component.unfilledColor,e.firstChild.setAttribute("height",this.component.iconHeight),e.firstChild.setAttribute("width",this.component.iconWidth),this.component.icon=(new XMLSerializer).serializeToString(e.documentElement)}constructor(e,t,n){super(e,t,n)}init(){this.setIconProperties(),super.init()}get inputInfo(){return super.inputInfo}render(e){let t='<div ref="rating">';for(let e=0;e<this.component.numOfIcons;e++)t+=this.component.icon;return t+="</div>",super.render(t)}attach(e){function t(e,t){for(const n of e)n.style.fill=t}if(this.loadRefs(e,{rating:"single"}),!this.component.disabled){let e=this.refs.rating.children;for(let n=0;n<e.length;n++){let i=e[n];i.addEventListener("click",(()=>{t(e,this.component.unfilledColor),i.style.fill=this.component.filledColor;let l=i.previousElementSibling;for(;l;)l.style.fill=this.component.filledColor,l=l.previousElementSibling;this.updateValue(`${n+1}/${e.length}`)}))}}return super.attach(e)}detach(){return super.detach()}destroy(){return super.destroy()}normalizeValue(e,t={}){return super.normalizeValue(e,t)}getValue(){return{hello:"Jacob"}}getValueAt(e){return super.getValueAt(e)}setValue(e,t={}){return super.setValue(e,t)}setValueAt(e,t,n={}){return super.setValueAt(e,t,n)}updateValue(e,t={}){return super.updateValue(...arguments)}}Formio.use([{components:{rating:i}}])})();