@mgdis/mg-components 6.27.0 → 6.28.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 n}from"@stencil/core/internal/client";import{C as a,d as o,t as r,i as h}from"./index2.js";import{n as l}from"./index3.js";import{a as m,c as p,b as c}from"./mg-input.conf.js";import{i as u}from"./index4.js";import{d}from"./mg-icon2.js";import{d as g}from"./mg-input2.js";import{d as v}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const y=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,w=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",m]),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=o(this.items)&&"string"==typeof t?t:Array.isArray(this.items)&&this.items.every(y)?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: ${r(t)}.`);if(o(t))this.options=t.map((t=>({title:t,value:t,disabled:this.disabled})));else{if(!t||!t.every((t=>y(t))))throw Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${r(t)}.`);this.options=t}}watchInputVerticalList(t){t?this.classCollection.add(this.classVerticalList):this.classCollection.delete(this.classVerticalList)}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}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(c):this.classCollection.delete(c)}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=u(this.element).messages,l(this),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:"763e021cdda0735dcbd62700f09cbc32c0de7377",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--label-on-top .mg-c-input__readonly-value{margin-top:0}.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-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}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 _(){"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),w);break;case"mg-icon":customElements.get(t(i))||d();break;case"mg-input":customElements.get(t(i))||g();break;case"mg-input-title":customElements.get(t(i))||v();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}_();const x=w,E=_;export{x 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 o,t as r,i as h}from"./index2.js";import{n as l}from"./index3.js";import{a as m,c as p,b as c}from"./mg-input.conf.js";import{i as d}from"./index4.js";import{d as u}from"./mg-icon2.js";import{d as g}from"./mg-input2.js";import{d as v}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const y=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,w=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.classVerticalList="mg-c-input--vertical-list",this.hasDisplayedError=!1,this.validityCheckPending=!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",m]),this.handleInput=t=>{this.value=this.options[t.target.value].value},this.handleBlur=()=>{this.handlerInProgress="blur",this.checkValidity(),this.setErrorMessage(),this.handlerInProgress=void 0},this.validateRequired=()=>{const t=this.options.filter((t=>!t.disabled));return!this.required||t.length<1||t.some((t=>this.isSelectedValue(t.value)))},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||void 0===this.getInvalidElement()&&this.validateRequired())},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:(void 0===i||i.validity.valueMissing)&&(this.errorMessage=this.messages.errors.required))},this.getInvalidElement=()=>this.getInputs().find((t=>!t.disabled&&!t.readOnly&&!t.checkValidity())),this.getInputs=()=>Array.from(this.element.shadowRoot.querySelectorAll('input[type="radio"]')),this.isSelectedValue=t=>JSON.stringify(this.value)===JSON.stringify(t)}watchValue(t){var i;this.validityCheckPending=!0,this.readonlyValue=o(this.items)&&"string"==typeof t?t:Array.isArray(this.items)&&this.items.every(y)?null===(i=this.items.find((i=>i.value===t)))||void 0===i?void 0:i.title:null,this.valueChange.emit(t)}validateItems(t,i){if("object"==typeof t&&t.length<2)throw Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${r(t)}.`);if(o(t))this.options=t.map((t=>({title:t,value:t,disabled:this.disabled})));else{if(!t||!t.every((t=>y(t))))throw Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${r(t)}.`);this.options=t}void 0!==i&&(void 0===this.value||this.options.some((t=>this.isSelectedValue(t.value)))||(this.value=void 0),this.validityCheckPending=!0)}watchInputVerticalList(t){t?this.classCollection.add(this.classVerticalList):this.classCollection.delete(this.classVerticalList)}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,e){this.getInputs().forEach((i=>{i[e]=t})),this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1)}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}async setFocus(){var t;null===(t=this.element.shadowRoot.querySelector("input"))||void 0===t||t.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.validityCheckPending=!1,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=d(this.element).messages,l(this),this.validateItems(this.items),this.watchInputVerticalList(this.inputVerticalList),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.watchValue(this.value),setTimeout((()=>{this.checkValidity(),this.validityCheckPending=!1}),0)}componentDidUpdate(){this.validityCheckPending&&this.getInputs().length>0&&(this.validityCheckPending=!1,this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage())}render(){return n("mg-input",{key:"1fd4b600eb95f2ff5c753884c40b982e0552d576",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:this.isSelectedValue(this.options[i].value),disabled:this.disabled||t.disabled,required:this.required,onBlur:this.handleBlur,onInput:this.handleInput}),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--label-on-top .mg-c-input__readonly-value{margin-top:0}.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-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}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 _(){"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),w);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||g();break;case"mg-input-title":customElements.get(t(i))||v();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}_();const x=w,E=_;export{x as MgInputRadio,E as defineCustomElement}