@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 3.85 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{A as t,F as e,D as i,G as s}from"./index-88dea7b1.js";import{g as o}from"./bootstrap-874afb5b.js";const a=(e,s,i)=>{t(e,"_name",s,i)},n=t=>"KOL-BUTTON"===t||"KOL-COMBOBOX"===t||"KOL-INPUT-CHECKBOX"===t||"KOL-INPUT-COLOR"===t||"KOL-INPUT-DATE"===t||"KOL-INPUT-EMAIL"===t||"KOL-INPUT-FILE"===t||"KOL-INPUT-NUMBER"===t||"KOL-INPUT-PASSWORD"===t||"KOL-INPUT-RADIO"===t||"KOL-INPUT-RANGE"===t||"KOL-INPUT-TEXT"===t||"KOL-SELECT"===t||"KOL-SINGLE-SELECT"===t||"KOL-TEXTAREA"===t;class l{constructor(t,s,a){var r,l,c,u;if(this.experimentalMode=e(),this.setFormAssociatedValue=t=>{var e;const s=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==s&&""!==s||i(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const o=this.tryToStringifyValue(t);this.syncValue(t,o,this.formAssociated),this.syncValue(t,o,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(a),this.type=s,(null===(r=o())||void 0===r?void 0:r.reflectInputValues)&&n(null===(l=this.host)||void 0===l?void 0:l.tagName)&&t._name){switch(null===(c=this.host)||void 0===c||c.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(u=this.host)||void 0===u||u.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,s){if(this.experimentalMode)try{if("boolean"!=typeof(s="object"==typeof s&&null!==s?JSON.stringify(s):s)&&"number"!=typeof s&&"string"!=typeof s)throw new Error("Invalid value type: "+typeof s);null==e||e.setAttribute(t,`${s}`)}catch(s){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return s(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,s){if(s)switch(this.type){case"file":s.files=t;break;case"select":s.querySelectorAll("option").forEach((t=>{s.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),s.appendChild(t)}}));break;case"radio":"string"==typeof e&&(s.setAttribute("value",e),s.setAttribute("checked",""),s.value=e);break;default:"string"==typeof e?(s.setAttribute("value",e),s.value=e):(s.removeAttribute("value"),s.value="")}}validateName(t){a(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&i("A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.")}validateSyncValueBySelector(t){if(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}export{l as A};