@freshworks/crayons/dist/esm-es5/fw-form-control.entry.js

Crayons Web Components library

var __awaiter=this&&this.__awaiter||function(e,t,r,i){function o(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,s){function n(e){try{l(i.next(e))}catch(t){s(t)}}function a(e){try{l(i["throw"](e))}catch(t){s(t)}}function l(e){e.done?r(e.value):o(e.value).then(n,a)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,n;return n={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function a(e){return function(t){return l([e,t])}}function l(n){if(i)throw new TypeError("Generator is already executing.");while(r)try{if(i=1,o&&(s=n[0]&2?o["return"]:n[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,n[1])).done)return s;if(o=0,s)n=[n[0]&2,s.value];switch(n[0]){case 0:case 1:s=n;break;case 4:r.label++;return{value:n[1],done:false};case 5:r.label++;o=n[1];n=[0];continue;case 7:n=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(n[0]===6||n[0]===2)){r=0;continue}if(n[0]===3&&(!s||n[1]>s[0]&&n[1]<s[3])){r.label=n[1];break}if(n[0]===6&&r.label<s[1]){r.label=s[1];s=n;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(n);break}if(s[2])r.ops.pop();r.trys.pop();continue}n=t.call(e,r)}catch(a){n=[6,a];o=0}finally{i=s=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t){for(var r=0,i=t.length,o=e.length;r<i;r++,o++)e[o]=t[r];return e};import{r as registerInstance,h,i as getElement}from"./index-25bc21e4.js";import{h as hasSlot}from"./index-04e9b0fa.js";import{T as TranslationController}from"./Translation-f65767b0.js";var formControlCss=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.error{color:#d72d30;font-weight:400;font-size:12px;line-height:20px;padding-top:4px;padding-left:2px}label{font-size:12px;color:#475867;font-weight:600;margin-bottom:4px;padding-left:2px;display:block}label.required::after{content:"*";position:relative;display:inline-block;top:2px;font-size:14px;color:#d72d30;padding-left:2px;font-weight:700}.hint{font-weight:400;font-size:12px;color:#475867;line-height:20px;padding-top:4px;padding-left:2px}.form-control-container{margin:1em 0em}';var NATIVE_CONTROLS=["input","select","textarea"];var FormControl=function(){function e(e){registerInstance(this,e);this.type="TEXT";this.required=false;this.hint="";this.placeholder="";this.choices=[];this.fieldProps={};this.touched=false;this.error="";this.hasSlot=false}e.prototype.renderControl=function(){var e,t,r,i,o,s,n,a;var l=this;var c,d,u,f,p,b,v,m,g,y,O,C,x,j,w,P,T,S,_,L;if(this.hasSlot)return null;if(!this.name)return null;var E;switch(this.type){case"TEXT":case"NUMBER":case"DECIMAL":case"EMAIL":case"TEL":case"URL":{var k=this.type==="DECIMAL"?"number":(c=this.type)===null||c===void 0?void 0:c.toLowerCase();var q=Object.assign(Object.assign(Object.assign(Object.assign({},this.fieldProps),{name:this.name,placeholder:this.placeholder,label:this.label,required:this.required,type:k}),(d=this.controlProps)===null||d===void 0?void 0:d.inputProps(this.name,k)),(e={state:this.touched&&this.error&&"error"||"normal"},e["hint-text"]=this.hint,e["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),e));E=h("fw-input",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}));break}case"PARAGRAPH":{var q=Object.assign(Object.assign(Object.assign(Object.assign({},this.fieldProps),{name:this.name,placeholder:this.placeholder,label:this.label,required:this.required}),(u=this.controlProps)===null||u===void 0?void 0:u.inputProps(this.name,(f=this.type)===null||f===void 0?void 0:f.toLowerCase())),(t={state:this.touched&&this.error&&"error"||"normal"},t["hint-text"]=this.hint,t["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),t));E=h("fw-textarea",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}))}break;case"DATE":{var q=Object.assign(Object.assign(Object.assign(Object.assign({},this.fieldProps),{name:this.name,placeholder:this.placeholder,label:this.label,required:this.required}),(p=this.controlProps)===null||p===void 0?void 0:p.inputProps(this.name,(b=this.type)===null||b===void 0?void 0:b.toLowerCase())),(r={state:this.touched&&this.error&&"error"||"normal"},r["hint-text"]=this.hint,r["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),r));E=h("fw-datepicker",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}))}break;case"CHECKBOX":{var q=Object.assign(Object.assign(Object.assign(Object.assign({},this.fieldProps),{name:this.name,placeholder:this.placeholder,label:"",required:this.required}),(v=this.controlProps)===null||v===void 0?void 0:v.checkboxProps(this.name,(m=this.type)===null||m===void 0?void 0:m.toLowerCase())),(i={state:this.touched&&this.error&&"error"||"normal"},i["hint-text"]=this.hint,i["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),i));E=h("fw-checkbox",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}),this.label)}break;case"RADIO":{var R=(g=this.controlProps)===null||g===void 0?void 0:g.radioProps(this.name,(y=this.type)===null||y===void 0?void 0:y.toLowerCase());var A=Object.assign(Object.assign(Object.assign({},this.fieldProps),(o={name:this.name,placeholder:this.placeholder,label:this.label,required:this.required,"allow-empty":true,state:this.touched&&this.error&&"error"||"normal"},o["hint-text"]=this.hint,o["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),o)),R);E=h("fw-radio-group",Object.assign({},A,{ref:function(e){return l.crayonsControlRef=e}}),(O=this.choices)===null||O===void 0?void 0:O.map((function(e){var t=e[A.optionValuePath]||e.value;var r=e[A.optionLabelPath]||e.value;return h("fw-radio",{name:l.name,value:t,state:l.touched&&l.error?"error":"normal"},r)})))}break;case"DROPDOWN":case"MULTI_SELECT":{var R=(C=this.controlProps)===null||C===void 0?void 0:C.selectProps(this.name,(x=this.type)===null||x===void 0?void 0:x.toLowerCase());var q=Object.assign(Object.assign({},this.fieldProps),(s={name:this.name,placeholder:this.placeholder,label:this.label,required:this.required,multiple:this.type==="MULTI_SELECT",state:this.touched&&this.error&&"error"||"normal"},s["hint-text"]=this.hint,s["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),s));q=Object.assign(Object.assign(Object.assign({},q),R),{options:this.choices});E=h("fw-select",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}))}break;case"RELATIONSHIP":{var R=(j=this.controlProps)===null||j===void 0?void 0:j.selectProps(this.name,(w=this.type)===null||w===void 0?void 0:w.toLowerCase());var q=Object.assign(Object.assign({},this.fieldProps),(n={name:this.name,placeholder:this.placeholder,label:this.label,required:this.required,state:this.touched&&this.error&&"error"||"normal"},n["hint-text"]=this.hint,n["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),n));if(Array.isArray(R.value)&&typeof R.value[0]==="object"){q.selectedOptions=R.value}if(((P=q.selectedOptions)===null||P===void 0?void 0:P.length)>0){(T=this.crayonsControlRef)===null||T===void 0?void 0:T.setSelectedOptions(q.selectedOptions)}else if(!R.value){(S=this.crayonsControlRef)===null||S===void 0?void 0:S.setSelectedOptions([])}q.noDataText=TranslationController.t("search.startTyping");E=h("fw-select",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}))}break;case"TIME":{var q=Object.assign(Object.assign(Object.assign(Object.assign({},this.fieldProps),{name:this.name,placeholder:this.placeholder,label:this.label,required:this.required}),(_=this.controlProps)===null||_===void 0?void 0:_.inputProps(this.name,(L=this.type)===null||L===void 0?void 0:L.toLowerCase())),(a={state:this.touched&&this.error&&"error"||"normal"},a["hint-text"]=this.hint,a["error-text"]=TranslationController.t(this.error,{field:this.label||this.name}),a));E=h("fw-timepicker",Object.assign({},q,{ref:function(e){return l.crayonsControlRef=e}}))}break}return E};e.prototype.componentWillLoad=function(){this.handleSlotChange()};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,r,i;return __generator(this,(function(o){switch(o.label){case 0:if(!!this.hasSlot)return[3,2];return[4,(t=(e=this.crayonsControlRef)===null||e===void 0?void 0:e.setFocus)===null||t===void 0?void 0:t.call(e)];case 1:o.sent();return[3,3];case 2:(i=(r=this.slotElement)===null||r===void 0?void 0:r.focus)===null||i===void 0?void 0:i.call(r);o.label=3;case 3:return[2]}}))}))};e.prototype.handleSlotChange=function(){var e;this.hasSlot=hasSlot(this.el);this.slotElement=(e=__spreadArray([],this.el.querySelectorAll("*")).filter((function(e){var t;return NATIVE_CONTROLS.includes((t=e===null||e===void 0?void 0:e.tagName)===null||t===void 0?void 0:t.toLowerCase())})))===null||e===void 0?void 0:e[0]};e.prototype.render=function(){var e=this;return h("div",{class:"form-control-container"},this.renderControl(),this.hasSlot&&h("label",{htmlFor:this.name,class:{label:true,required:this.required}},this.label),h("slot",{onSlotchange:function(){return e.handleSlotChange()}}),this.hasSlot&&!(this.touched&&this.error)&&h("div",{class:"hint",id:"hint-"+this.name},this.hint),this.hasSlot&&this.touched&&this.error&&h("div",{class:"error",id:"error-"+this.name},TranslationController.t(this.error,{field:this.label||this.name})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();FormControl.style=formControlCss;export{FormControl as fw_form_control};