@mgdis/mg-components 6.21.0 → 6.22.0

package/dist/components/mg-input-radio.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as a}from"@stencil/core/internal/client";import{C as n,d as r,t as o,i as h}from"./index2.js";import{a as l,c as m,b as p}from"./mg-input.conf.js";import{i as c}from"./index3.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as g}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const v=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,y=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=s(this,"value-change",7),this.inputValid=s(this,"input-valid",7),this.inputs=[],this.classVerticalList="mg-c-input--vertical-list",this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.inputVerticalList=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new n(["mg-c-input--radio",l]),this.handleInput=t=>{this.checkValidity(),this.value=this.options[t.target.value].value},this.handleBlur=()=>{this.handlerInProgress="blur",this.checkValidity(),this.setErrorMessage(),this.handlerInProgress=void 0},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||void 0===this.getInvalidElement())},this.setErrorMessage=(t=!1)=>{const i=this.getInvalidElement();this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:i.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.getInvalidElement=()=>this.inputs.find((t=>!t.disabled&&!t.readOnly&&!t.checkValidity()))}watchValue(t){var i;this.readonlyValue=r(this.items)&&"string"==typeof t?t:Array.isArray(this.items)&&this.items.every(v)?null===(i=this.items.find((i=>i.value===t)))||void 0===i?void 0:i.title:null,this.valueChange.emit(t)}validateItems(t){if("object"==typeof t&&t.length<2)throw Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${o(t)}.`);if(r(t))this.options=t.map((t=>({title:t,value:t,disabled:this.disabled})));else{if(!t||!t.every((t=>v(t))))throw Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${o(t)}.`);this.options=t}}watchInputVerticalList(t){t?this.classCollection.add(this.classVerticalList):this.classCollection.delete(this.classVerticalList)}watchReadonly(t){t?this.classCollection.add(m):this.classCollection.delete(m)}handleValidityChange(t,i,e){this.inputs.forEach((i=>{i[e]=t})),this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1)}watchDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}async setFocus(){this.inputs.length>0&&this.inputs[0].focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,e=!1){if("boolean"!=typeof t)throw Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!h(i))throw Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&e,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value=void 0,new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=c(this.element).messages,this.validateItems(this.items),this.watchInputVerticalList(this.inputVerticalList),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.watchValue(this.value),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"8d26edd50d44fbba4fee5fa6ef36aa3c455b1e5b",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&!this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.readonlyValue&&a("b",{class:"mg-c-input__readonly-value"},this.readonlyValue):a("ul",{class:"mg-c-input__input-group-container",role:"list"},this.options.map(((t,i)=>a("li",{key:t.title,class:{"mg-c-input__input-group":!0,"mg-c-input__input-group--disabled":this.disabled||t.disabled}},a("input",{type:"radio",id:this.identifier+"_"+i,name:this.identifier,value:i,checked:JSON.stringify(this.value)===JSON.stringify(this.options[i].value),disabled:this.disabled||t.disabled,required:this.required,onBlur:this.handleBlur,onInput:this.handleInput,ref:t=>{null!==t&&(this.inputs[i]=t)}}),a("label",{htmlFor:this.identifier+"_"+i},t.title))))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{validateItems:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}"}},[1,"mg-input-radio",{value:[1032],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],inputVerticalList:[4,"input-vertical-list"],required:[4],readonly:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],options:[32],readonlyValue:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{validateItems:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-radio","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-radio":customElements.get(t(i))||customElements.define(t(i),y);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||g();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}w();const _=y,E=w;export{_ as MgInputRadio,E as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as n}from"@stencil/core/internal/client";import{C as a,d as r,t as o,i as h}from"./index2.js";import{a as l,c as m,b as p}from"./mg-input.conf.js";import{i as c}from"./index3.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as g}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const f=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,y=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=s(this,"value-change",7),this.inputValid=s(this,"input-valid",7),this.inputs=[],this.classVerticalList="mg-c-input--vertical-list",this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.inputVerticalList=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new a(["mg-c-input--radio",l]),this.handleInput=t=>{this.checkValidity(),this.value=this.options[t.target.value].value},this.handleBlur=()=>{this.handlerInProgress="blur",this.checkValidity(),this.setErrorMessage(),this.handlerInProgress=void 0},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||void 0===this.getInvalidElement())},this.setErrorMessage=(t=!1)=>{const i=this.getInvalidElement();this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:i.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.getInvalidElement=()=>this.inputs.find((t=>!t.disabled&&!t.readOnly&&!t.checkValidity()))}watchValue(t){var i;this.readonlyValue=r(this.items)&&"string"==typeof t?t:Array.isArray(this.items)&&this.items.every(f)?null===(i=this.items.find((i=>i.value===t)))||void 0===i?void 0:i.title:null,this.valueChange.emit(t)}validateItems(t){if("object"==typeof t&&t.length<2)throw Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${o(t)}.`);if(r(t))this.options=t.map((t=>({title:t,value:t,disabled:this.disabled})));else{if(!t||!t.every((t=>f(t))))throw Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${o(t)}.`);this.options=t}}watchInputVerticalList(t){t?this.classCollection.add(this.classVerticalList):this.classCollection.delete(this.classVerticalList)}watchReadonly(t){t?this.classCollection.add(m):this.classCollection.delete(m)}handleValidityChange(t,i,e){this.inputs.forEach((i=>{i[e]=t})),this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1)}watchDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}async setFocus(){this.inputs.length>0&&this.inputs[0].focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,e=!1){if("boolean"!=typeof t)throw Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!h(i))throw Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&e,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value=void 0,new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=c(this.element).messages,this.validateItems(this.items),this.watchInputVerticalList(this.inputVerticalList),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.watchValue(this.value),setTimeout((()=>{this.checkValidity()}),0)}render(){return n("mg-input",{key:"bdeb5a98bc7f4567beb293c1fcf4f99169089fa6",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&!this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.readonlyValue&&n("b",{class:"mg-c-input__readonly-value"},this.readonlyValue):n("div",{class:"mg-c-input__input-group-container"},this.options.map(((t,i)=>n("div",{key:t.title,class:{"mg-c-input__input-group":!0,"mg-c-input__input-group--disabled":this.disabled||t.disabled}},n("input",{type:"radio",id:this.identifier+"_"+i,name:this.identifier,value:i,checked:JSON.stringify(this.value)===JSON.stringify(this.options[i].value),disabled:this.disabled||t.disabled,required:this.required,onBlur:this.handleBlur,onInput:this.handleInput,ref:t=>{null!==t&&(this.inputs[i]=t)}}),n("label",{htmlFor:this.identifier+"_"+i},t.title))))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{validateItems:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}"}},[1,"mg-input-radio",{value:[1032],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],inputVerticalList:[4,"input-vertical-list"],required:[4],readonly:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],options:[32],readonlyValue:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{validateItems:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-radio","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-radio":customElements.get(t(i))||customElements.define(t(i),y);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||g();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}w();const _=y,E=w;export{_ as MgInputRadio,E as defineCustomElement}