@mgdis/mg-components 6.24.0 → 6.25.0

package/dist/components/mg-input-select2.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 o,d as r,t as a,i as h}from"./index2.js";import{n as l}from"./index3.js";import{c as p,b as m,w 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 b}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const w=t=>"object"==typeof t&&"string"==typeof t.title,y=t=>Array.isArray(t)&&t.every((t=>w(t))),_=t=>"object"==typeof t&&"string"==typeof t.group&&y(t.options),x=t=>{const i=new Map;t.forEach((({title:t,group:e})=>{i.has(e)||i.set(e,new Set);const s=i.get(e);if(s.has(t))throw new Error(`<mg-input-select> prop "items" must not contain options with the same "title" ${void 0===e?"outside of a group":`within the group "${e}"`}. Duplicated title: "${t}".`);s.add(t)}))},z=(t,{group:i,title:e,value:s,disabled:n})=>{if(void 0!==i){const o=t.find((t=>t.group===i));void 0!==o?o.options.push({title:e,value:s,disabled:n}):t.push({group:i,options:[{title:e,value:s,disabled:n}]})}else t.push({title:e,value:s,disabled:n});return t},E=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.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.placeholderHide=!1,this.placeholderDisabled=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new o(["mg-c-input--select"]),this.getReadonlyValue=()=>{var t;return r(this.items)&&"string"==typeof this.value?this.items.find((t=>t===this.value)):y(this.items)?null===(t=this.items.find((t=>t.value===this.value)))||void 0===t?void 0:t.title:null},this.getOptions=()=>this.options.flatMap((t=>_(t)?t.options:[t])),this.getSelectedOption=()=>{var t;if(void 0===(null===(t=this.input)||void 0===t?void 0:t.value)||""===this.input.value)return;const i=this.getOptions(),e=i[Number(this.input.value)];return null!=e?e:i.find((t=>t.value===this.input.value))},this.handleInput=()=>{const t=this.getSelectedOption();""===this.input.value?this.value=null:void 0!==t?this.value=t.value:(this.options.push({title:this.input.value,value:this.input.value,disabled:!0}),this.value=this.input.value),this.hasDisplayedError&&this.setErrorMessage()},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.isDisabledValue=()=>{var t;return!0===(null===(t=this.getSelectedOption())||void 0===t?void 0:t.disabled)},this.checkValidity=()=>{this.setValidity(!this.isDisabledValue()&&(this.readonly||this.disabled||this.input.checkValidity()))},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.renderOption=(t,i)=>n("option",{key:i,value:`${i}`,selected:JSON.stringify(this.value)===JSON.stringify(t.value),disabled:t.disabled},t.title)}validateValue(t){setTimeout((()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage()}),0),this.valueChange.emit(t)}validateItems(t){if(0===t.length)this.options=[];else if(r(t))x(t.map((t=>({title:t})))),"string"==typeof this.value&&(this.valueExist=t.includes(this.value)),this.options=t.map((t=>({title:t,value:t})));else{if(!y(t))throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${a(t)}.`);x(t),this.valueExist=t.map((t=>t.value)).includes(this.value),this.options=t.some((t=>Boolean(t.group)))?t.reduce(z,[]):t}}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(m):this.classCollection.delete(m)}watchMgWidth(t){c.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)})),void 0!==t&&this.classCollection.add(`mg-c-input--width-${this.mgWidth}`)}async setFocus(){var t;null===(t=this.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 new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!h(i))throw new Error('<mg-input-select> 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=null,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.validateValue(this.value),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),void 0!==this.placeholder&&""!==this.placeholder||(this.placeholder=this.messages.input.select.placeholder),setTimeout((()=>{this.checkValidity()}),0)}render(){const t=this.getReadonlyValue();let i=0;return n("mg-input",{key:"9e51eff6ef7158aa1786a893985e4d1d202e94ed",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&&null===t?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?t&&n("b",{class:"mg-c-input__readonly-value"},t):n("select",{class:"mg-c-input__box",id:this.identifier,name:this.name,title:this.placeholder,disabled:this.disabled,required:this.required,"aria-invalid":(!0===this.invalid).toString(),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}},(!this.placeholderHide||!this.valueExist)&&n("option",{value:"",disabled:this.placeholderDisabled&&this.valueExist},this.placeholder),this.options.map((t=>_(t)?n("optgroup",{label:t.group,key:t.group},t.options.map((t=>this.renderOption(t,i++)))):w(t)&&this.renderOption(t,i++)))))}get element(){return this}static get watchers(){return{value:[{validateValue:0}],items:[{validateItems:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.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__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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}.mg-c-input__box{max-width:100%;padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}"}},[1,"mg-input-select",{value:[1032],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1025],placeholderHide:[4,"placeholder-hide"],placeholderDisabled:[4,"placeholder-disabled"],required:[4],readonly:[4],disabled:[4],mgWidth:[520,"mg-width"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],options:[32],valueExist:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{validateValue:0}],items:[{validateItems:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}]);function k(){"undefined"!=typeof customElements&&["mg-input-select","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-select":customElements.get(t(i))||customElements.define(t(i),E);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))||b();break;case"mg-tooltip":customElements.get(t(i))||v();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}k();export{E as M,k as d}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as n}from"@stencil/core/internal/client";import{C as o,d as a,t as r,i as h}from"./index2.js";import{n as l}from"./index3.js";import{c as p,b as c,w as m}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 b}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const w=t=>"object"==typeof t&&"string"==typeof t.title,y=t=>Array.isArray(t)&&t.every((t=>w(t))),_=t=>"object"==typeof t&&"string"==typeof t.group&&y(t.options),x=t=>{const i=new Map;t.forEach((({title:t,group:e})=>{i.has(e)||i.set(e,new Set);const s=i.get(e);if(s.has(t))throw new Error(`<mg-input-select> prop "items" must not contain options with the same "title" ${void 0===e?"outside of a group":`within the group "${e}"`}. Duplicated title: "${t}".`);s.add(t)}))},z=(t,{group:i,title:e,value:s,disabled:n})=>{if(void 0!==i){const o=t.find((t=>t.group===i));void 0!==o?o.options.push({title:e,value:s,disabled:n}):t.push({group:i,options:[{title:e,value:s,disabled:n}]})}else t.push({title:e,value:s,disabled:n});return t},E=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.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.placeholderHide=!1,this.placeholderDisabled=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new o(["mg-c-input--select"]),this.getReadonlyValue=()=>{var t;return a(this.items)&&"string"==typeof this.value?this.items.find((t=>t===this.value)):y(this.items)?null===(t=this.items.find((t=>t.value===this.value)))||void 0===t?void 0:t.title:null},this.getOptions=()=>this.options.flatMap((t=>_(t)?t.options:[t])),this.getSelectedOption=()=>{var t;if(void 0===(null===(t=this.input)||void 0===t?void 0:t.value)||""===this.input.value)return;const i=this.getOptions(),e=i[Number(this.input.value)];return null!=e?e:i.find((t=>t.value===this.input.value))},this.handleInput=()=>{const t=this.getSelectedOption();""===this.input.value?this.value=null:void 0!==t?this.value=t.value:(this.options.push({title:this.input.value,value:this.input.value,disabled:!0}),this.value=this.input.value),this.hasDisplayedError&&this.setErrorMessage()},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.isDisabledValue=()=>{var t;return!0===(null===(t=this.getSelectedOption())||void 0===t?void 0:t.disabled)},this.checkValidity=()=>{this.setValidity(!this.isDisabledValue()&&(this.readonly||this.disabled||this.input.checkValidity()))},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.renderOption=(t,i)=>n("option",{key:i,value:`${i}`,selected:JSON.stringify(this.value)===JSON.stringify(t.value),disabled:t.disabled},t.title)}validateValue(t){setTimeout((()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage()}),0),this.valueChange.emit(t)}validateItems(t){if(0===t.length)this.options=[];else if(a(t))x(t.map((t=>({title:t})))),"string"==typeof this.value&&(this.valueExist=t.includes(this.value)),this.options=t.map((t=>({title:t,value:t})));else{if(!y(t))throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${r(t)}.`);x(t),this.valueExist=t.map((t=>t.value)).includes(this.value),this.options=t.some((t=>Boolean(t.group)))?t.reduce(z,[]):t}}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)})),void 0!==t&&this.classCollection.add(`mg-c-input--width-${this.mgWidth}`)}async setFocus(){var t;null===(t=this.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 new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!h(i))throw new Error('<mg-input-select> 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=null,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.validateValue(this.value),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),void 0!==this.placeholder&&""!==this.placeholder||(this.placeholder=this.messages.input.select.placeholder),setTimeout((()=>{this.checkValidity()}),0)}render(){const t=this.getReadonlyValue();let i=0;return n("mg-input",{key:"aab8c17ced01c0afbec9114f280ee2b7fa73cdfc",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&&null===t?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?t&&n("b",{class:"mg-c-input__readonly-value"},t):n("select",{class:"mg-c-input__box",id:this.identifier,name:this.name,title:this.placeholder,disabled:this.disabled,required:this.required,"aria-invalid":(!0===this.invalid).toString(),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}},(!this.placeholderHide||!this.valueExist)&&n("option",{value:"",disabled:this.placeholderDisabled&&this.valueExist},this.placeholder),this.options.map((t=>_(t)?n("optgroup",{label:t.group,key:t.group},t.options.map((t=>this.renderOption(t,i++)))):w(t)&&this.renderOption(t,i++)))))}get element(){return this}static get watchers(){return{value:[{validateValue:0}],items:[{validateItems:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.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__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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}.mg-c-input__box{max-width:100%;padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}"}},[1,"mg-input-select",{value:[1032],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1025],placeholderHide:[4,"placeholder-hide"],placeholderDisabled:[4,"placeholder-disabled"],required:[4],readonly:[4],disabled:[4],mgWidth:[520,"mg-width"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],options:[32],valueExist:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{validateValue:0}],items:[{validateItems:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}]);function k(){"undefined"!=typeof customElements&&["mg-input-select","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-select":customElements.get(t(i))||customElements.define(t(i),E);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))||b();break;case"mg-tooltip":customElements.get(t(i))||v();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}k();export{E as M,k as d}

package/dist/components/mg-input-text2.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,i as r,d as o,t as h}from"./index2.js";import{n as p}from"./index3.js";import{c,b as l,w as m,e as g}from"./mg-input.conf.js";import{i as u}from"./index4.js";import{d}from"./mg-character-left2.js";import{d as b}from"./mg-icon2.js";import{d as f}from"./mg-input2.js";import{d as v}from"./mg-input-title2.js";import{d as w}from"./mg-tooltip2.js";import{d as y}from"./mg-tooltip-content2.js";const _=["email","emails","url"],x=["text","search","tel",..._],z=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,E=t=>o(t)||Array.isArray(t)&&t.every(z),T=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.classIsInputGroupAppend="mg-c-input--is-input-group-append",this.classHasIcon="mg-c-input--has-icon",this.classHasButtonsGroupAppend="mg-c-input--has-buttons-group-append",this.classIsAppendInputSlotContent="mg-c-input--is-append-input-slot-content",this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.type="text",this.maxlength=400,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.characterLeftHide=!1,this.classCollection=new n(["mg-c-input--text"]),this.validatePattern=()=>{if(!(void 0===this.pattern&&void 0===this.patternErrorMessage||r(this.pattern)&&(_.includes(this.type)||r(this.patternErrorMessage))))throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`)},this.handleInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{var i;this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.typeMismatch?this.errorMessage=this.messages.input.text.errors.typeMismatch[this.type]:this.input.validity.patternMismatch?this.errorMessage=null!==(i=this.patternErrorMessage)&&void 0!==i?i:this.messages.input.text.errors.typeMismatch[this.type]:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.validateAppendSlot=()=>{const t=Array.from(this.element.querySelectorAll('[slot="append-input"]'));1===t.length?"MG-BUTTON"===t[0].nodeName?this.classCollection.add(this.classIsInputGroupAppend):(this.classCollection.add(this.classIsAppendInputSlotContent),this.slotContent=t[0].textContent):t.filter((t=>"MG-BUTTON"===t.nodeName)).length>1&&(this.classCollection.add(this.classIsInputGroupAppend),this.classCollection.add(this.classHasButtonsGroupAppend))},this.hasDatalist=()=>E(this.datalistoptions)&&this.datalistoptions.length>0,this.renderReadonly=()=>void 0!==this.slotContent?a("span",{class:"mg-c-input__readonly-value"},a("b",null,this.value),this.slotContent):a("b",{class:"mg-c-input__readonly-value"},this.value)}handleValue(t){var i,e;(null===(i=this.datalistoptions)||void 0===i?void 0:i.every(z))?this.valueChange.emit((null===(e=this.datalistoptions.find((i=>i.title===t)))||void 0===e?void 0:e.value)||t):this.valueChange.emit(t)}validateType(t){if(!x.includes(t))throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${x.join(", ")}. Passed value: ${t}.`)}validateIcon(t){void 0!==t?this.classCollection.add(this.classHasIcon):this.classCollection.delete(this.classHasIcon)}validateDatalistoptions(t){if(Boolean(t)&&!E(t))throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${h(t)}.`)}watchReadonly(t){t?this.classCollection.add(c):this.classCollection.delete(c)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(l):this.classCollection.delete(l)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)})),void 0!==t&&this.classCollection.add(`mg-c-input--width-${this.mgWidth}`)}watchPattern(){this.validatePattern()}validateCharacterLeftHide(t){t?this.classCollection.delete(g):this.classCollection.add(g)}watchHelpText(t){!r(t)&&_.includes(this.type)&&(this.helpText=this.messages.input.text.helpText[this.type])}async setFocus(){var t;null===(t=this.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 new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!r(i))throw new Error('<mg-input-text> 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="",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,this.characterLeftId=`${this.identifier}-character-left`,this.datalistId=`${this.identifier}-datalist`,p(this),this.validateIcon(this.icon),this.validateDatalistoptions(this.datalistoptions),this.watchPattern(),this.validateAppendSlot(),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.validateCharacterLeftHide(this.characterLeftHide),this.validateType(this.type),this.watchHelpText(this.helpText),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"5758548bc9e5b1319e5d2f4832339d2f95d9d436",label:this.label,identifier:this.identifier,class:this.classCollection.join(),ariaDescribedbyIDs:this.characterLeftId,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.value&&this.renderReadonly():[a("div",{key:"input",class:"mg-c-input__input-group-container",style:{"--mg-c-character-left-message-length":(this.characterLeftHide?0:2*this.maxlength.toString().length+1).toString()}},void 0!==this.icon&&a("mg-icon",{icon:this.icon}),a("input",{type:"emails"===this.type?"email":this.type,multiple:"emails"===this.type,class:"mg-c-input__box mg-c-input__box--width",value:this.value,id:this.identifier,list:this.hasDatalist()?this.datalistId:void 0,autocomplete:this.hasDatalist()?"off":void 0,name:this.name,placeholder:this.placeholder,title:this.placeholder,maxlength:this.maxlength,disabled:this.disabled,required:this.required,"aria-invalid":(!0===this.invalid).toString(),pattern:this.pattern,onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),this.hasDatalist()&&a("datalist",{id:this.datalistId},this.datalistoptions.map((t=>a("option",{value:z(t)?t.title:t,key:t})))),!this.characterLeftHide&&this.maxlength>0&&a("mg-character-left",{identifier:this.characterLeftId,characters:this.value,maxlength:this.maxlength})),a("slot",{key:"slot",name:"append-input"})])}get element(){return this}static get watchers(){return{value:[{handleValue:0}],type:[{validateType:0}],icon:[{validateIcon:0}],datalistoptions:[{validateDatalistoptions:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{watchPattern:0}],patternErrorMessage:[{watchPattern:0}],characterLeftHide:[{validateCharacterLeftHide:0}],helpText:[{watchHelpText:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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}.mg-c-input.mg-c-input--display-character-left mg-character-left{top:50%;right:var(--mg-b-size-8);font-size:var(--mg-b-font-size-small);transform:translateY(-50%)}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box:focus{padding-right:max(var(--mg-c-character-left-message-length)*(.35ch + .3rem) + var(--mg-b-size-16)*clamp(0,var(--mg-c-character-left-message-length),1),var(--mg-b-size-8))}"}},[257,"mg-input-text",{value:[1544],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],type:[1],icon:[1],placeholder:[1],datalistoptions:[16],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],pattern:[1],patternErrorMessage:[1,"pattern-error-message"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],characterLeftHide:[4,"character-left-hide"],helpText:[1025,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],type:[{validateType:0}],icon:[{validateIcon:0}],datalistoptions:[{validateDatalistoptions:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{watchPattern:0}],patternErrorMessage:[{watchPattern:0}],characterLeftHide:[{validateCharacterLeftHide:0}],helpText:[{watchHelpText:0}]}]);function k(){"undefined"!=typeof customElements&&["mg-input-text","mg-character-left","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-text":customElements.get(t(i))||customElements.define(t(i),T);break;case"mg-character-left":customElements.get(t(i))||d();break;case"mg-icon":customElements.get(t(i))||b();break;case"mg-input":customElements.get(t(i))||f();break;case"mg-input-title":customElements.get(t(i))||v();break;case"mg-tooltip":customElements.get(t(i))||w();break;case"mg-tooltip-content":customElements.get(t(i))||y()}}))}k();export{T as M,k as d}
+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,i as r,d as o,t as h}from"./index2.js";import{n as p}from"./index3.js";import{c,b as l,w as m,e as g}from"./mg-input.conf.js";import{i as u}from"./index4.js";import{d}from"./mg-character-left2.js";import{d as b}from"./mg-icon2.js";import{d as f}from"./mg-input2.js";import{d as v}from"./mg-input-title2.js";import{d as w}from"./mg-tooltip2.js";import{d as y}from"./mg-tooltip-content2.js";const _=["email","emails","url"],x=["text","search","tel",..._],z=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,E=t=>o(t)||Array.isArray(t)&&t.every(z),T=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.classIsInputGroupAppend="mg-c-input--is-input-group-append",this.classHasIcon="mg-c-input--has-icon",this.classHasButtonsGroupAppend="mg-c-input--has-buttons-group-append",this.classIsAppendInputSlotContent="mg-c-input--is-append-input-slot-content",this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.type="text",this.maxlength=400,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.characterLeftHide=!1,this.classCollection=new n(["mg-c-input--text"]),this.validatePattern=()=>{if(!(void 0===this.pattern&&void 0===this.patternErrorMessage||r(this.pattern)&&(_.includes(this.type)||r(this.patternErrorMessage))))throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`)},this.handleInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{var i;this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.typeMismatch?this.errorMessage=this.messages.input.text.errors.typeMismatch[this.type]:this.input.validity.patternMismatch?this.errorMessage=null!==(i=this.patternErrorMessage)&&void 0!==i?i:this.messages.input.text.errors.typeMismatch[this.type]:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.validateAppendSlot=()=>{const t=Array.from(this.element.querySelectorAll('[slot="append-input"]'));1===t.length?"MG-BUTTON"===t[0].nodeName?this.classCollection.add(this.classIsInputGroupAppend):(this.classCollection.add(this.classIsAppendInputSlotContent),this.slotContent=t[0].textContent):t.filter((t=>"MG-BUTTON"===t.nodeName)).length>1&&(this.classCollection.add(this.classIsInputGroupAppend),this.classCollection.add(this.classHasButtonsGroupAppend))},this.hasDatalist=()=>E(this.datalistoptions)&&this.datalistoptions.length>0,this.renderReadonly=()=>void 0!==this.slotContent?a("span",{class:"mg-c-input__readonly-value"},a("b",null,this.value),this.slotContent):a("b",{class:"mg-c-input__readonly-value"},this.value)}handleValue(t){var i,e;(null===(i=this.datalistoptions)||void 0===i?void 0:i.every(z))?this.valueChange.emit((null===(e=this.datalistoptions.find((i=>i.title===t)))||void 0===e?void 0:e.value)||t):this.valueChange.emit(t)}validateType(t){if(!x.includes(t))throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${x.join(", ")}. Passed value: ${t}.`)}validateIcon(t){void 0!==t?this.classCollection.add(this.classHasIcon):this.classCollection.delete(this.classHasIcon)}validateDatalistoptions(t){if(Boolean(t)&&!E(t))throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${h(t)}.`)}watchReadonly(t){t?this.classCollection.add(c):this.classCollection.delete(c)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(l):this.classCollection.delete(l)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)})),void 0!==t&&this.classCollection.add(`mg-c-input--width-${this.mgWidth}`)}watchPattern(){this.validatePattern()}validateCharacterLeftHide(t){t?this.classCollection.delete(g):this.classCollection.add(g)}watchHelpText(t){!r(t)&&_.includes(this.type)&&(this.helpText=this.messages.input.text.helpText[this.type])}async setFocus(){var t;null===(t=this.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 new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!r(i))throw new Error('<mg-input-text> 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="",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,this.characterLeftId=`${this.identifier}-character-left`,this.datalistId=`${this.identifier}-datalist`,p(this),this.validateIcon(this.icon),this.validateDatalistoptions(this.datalistoptions),this.watchPattern(),this.validateAppendSlot(),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.validateCharacterLeftHide(this.characterLeftHide),this.validateType(this.type),this.watchHelpText(this.helpText),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"3454b5f94af7b47a2c94b1416f59f840552ef70a",label:this.label,identifier:this.identifier,class:this.classCollection.join(),ariaDescribedbyIDs:this.characterLeftId,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.value&&this.renderReadonly():[a("div",{key:"input",class:"mg-c-input__input-group-container",style:{"--mg-c-character-left-message-length":(this.characterLeftHide?0:2*this.maxlength.toString().length+1).toString()}},void 0!==this.icon&&a("mg-icon",{icon:this.icon}),a("input",{type:"emails"===this.type?"email":this.type,multiple:"emails"===this.type,class:"mg-c-input__box mg-c-input__box--width",value:this.value,id:this.identifier,list:this.hasDatalist()?this.datalistId:void 0,autocomplete:this.hasDatalist()?"off":void 0,name:this.name,placeholder:this.placeholder,title:this.placeholder,maxlength:this.maxlength,disabled:this.disabled,required:this.required,"aria-invalid":(!0===this.invalid).toString(),pattern:this.pattern,onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),this.hasDatalist()&&a("datalist",{id:this.datalistId},this.datalistoptions.map((t=>a("option",{value:z(t)?t.title:t,key:t})))),!this.characterLeftHide&&this.maxlength>0&&a("mg-character-left",{identifier:this.characterLeftId,characters:this.value,maxlength:this.maxlength})),a("slot",{key:"slot",name:"append-input"})])}get element(){return this}static get watchers(){return{value:[{handleValue:0}],type:[{validateType:0}],icon:[{validateIcon:0}],datalistoptions:[{validateDatalistoptions:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{watchPattern:0}],patternErrorMessage:[{watchPattern:0}],characterLeftHide:[{validateCharacterLeftHide:0}],helpText:[{watchHelpText:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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}.mg-c-input.mg-c-input--display-character-left mg-character-left{top:50%;right:var(--mg-b-size-8);font-size:var(--mg-b-font-size-small);transform:translateY(-50%)}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box:focus{padding-right:max(var(--mg-c-character-left-message-length)*(.35ch + .3rem) + var(--mg-b-size-16)*clamp(0,var(--mg-c-character-left-message-length),1),var(--mg-b-size-8))}"}},[257,"mg-input-text",{value:[1544],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],type:[1],icon:[1],placeholder:[1],datalistoptions:[16],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],pattern:[1],patternErrorMessage:[1,"pattern-error-message"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],characterLeftHide:[4,"character-left-hide"],helpText:[1025,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],type:[{validateType:0}],icon:[{validateIcon:0}],datalistoptions:[{validateDatalistoptions:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{watchPattern:0}],patternErrorMessage:[{watchPattern:0}],characterLeftHide:[{validateCharacterLeftHide:0}],helpText:[{watchHelpText:0}]}]);function k(){"undefined"!=typeof customElements&&["mg-input-text","mg-character-left","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-text":customElements.get(t(i))||customElements.define(t(i),T);break;case"mg-character-left":customElements.get(t(i))||d();break;case"mg-icon":customElements.get(t(i))||b();break;case"mg-input":customElements.get(t(i))||f();break;case"mg-input-title":customElements.get(t(i))||v();break;case"mg-tooltip":customElements.get(t(i))||w();break;case"mg-tooltip-content":customElements.get(t(i))||y()}}))}k();export{T as M,k as d}

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

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as a}from"@stencil/core/internal/client";import{C as n,i as s,t as o}from"./index2.js";import{n as c}from"./index3.js";import{c as p,b as m,w as h,e as l}from"./mg-input.conf.js";import{i as g}from"./index4.js";import{d as u}from"./mg-character-left2.js";import{d}from"./mg-icon2.js";import{d as b}from"./mg-input2.js";import{d as f}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as _}from"./mg-tooltip-content2.js";const w=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=r(this,"value-change",7),this.inputValid=r(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.maxlength=4e3,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.rows=3,this.tooltipPosition="input",this.characterLeftHide=!1,this.resizable="none",this.classCollection=new n(["mg-c-input--textarea"]),this.handleInput=()=>{this.hasDisplayedError&&(this.checkValidity(),this.setErrorMessage()),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.getPatternValidity=()=>void 0===this.pattern||RegExp(`^${this.pattern}$`,"u").test(this.value),this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity()&&this.getPatternValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.getPatternValidity()?this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required):this.errorMessage=this.patternErrorMessage)}}handleValue(t){this.checkValidity(),this.valueChange.emit(t)}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}validateDisabled(t){t?this.classCollection.add(m):this.classCollection.delete(m)}watchMgWidth(t){h.forEach((t=>{this.classCollection.delete("mg-c-input--width-"+t)})),void 0!==t&&this.classCollection.add("mg-c-input--width-"+this.mgWidth)}validatePattern(t){if(!(void 0===t||s(this.pattern)&&s(this.patternErrorMessage)))throw Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${o(this.pattern)}'" and "patternErrorMessage='${o(this.patternErrorMessage)}'".`)}validatecharacterLeftHide(t){t?this.classCollection.delete(l):this.classCollection.add(l)}async setFocus(){var t;null===(t=this.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-textarea> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!s(i))throw Error('<mg-input-textarea> 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="",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=g(this.element).messages,this.characterLeftId=this.identifier+"-character-left",c(this),this.validatecharacterLeftHide(this.characterLeftHide),this.validatePattern(this.pattern),this.validatePattern(this.patternErrorMessage),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.validateDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"5a6d89809f5e842cf5a0cda0e3c692cc4c0f667f",label:this.label,identifier:this.identifier,class:this.classCollection.join(),ariaDescribedbyIDs:this.characterLeftId,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.value&&a("b",{class:"mg-c-input__readonly-value"},this.value):a("div",{class:"mg-c-input__input-group-container"},a("textarea",{class:{"mg-c-input__box":!0,"mg-c-input__box--width":!0,"mg-c-input__box--resizable":"both"===this.resizable,"mg-c-input__box--resizable-horizontal":"horizontal"===this.resizable,"mg-c-input__box--resizable-vertical":"vertical"===this.resizable},value:this.value,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,rows:this.rows,maxlength:this.maxlength,disabled:this.disabled,required:this.required,"aria-invalid":""+(!0===this.invalid),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),!this.characterLeftHide&&this.maxlength>0&&a("mg-character-left",{identifier:this.characterLeftId,characters:this.value,maxlength:this.maxlength})))}get element(){return this}static get watchers(){return{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{validatePattern:0}],patternErrorMessage:[{validatePattern:0}],characterLeftHide:[{validatecharacterLeftHide:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-4)/2 - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}"}},[1,"mg-input-textarea",{value:[1537],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],pattern:[1],patternErrorMessage:[1,"pattern-error-message"],rows:[2],tooltip:[1],tooltipPosition:[1,"tooltip-position"],characterLeftHide:[4,"character-left-hide"],helpText:[1,"help-text"],resizable:[1],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{validatePattern:0}],patternErrorMessage:[{validatePattern:0}],characterLeftHide:[{validatecharacterLeftHide:0}]}]);function x(){"undefined"!=typeof customElements&&["mg-input-textarea","mg-character-left","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-textarea":customElements.get(t(i))||customElements.define(t(i),w);break;case"mg-character-left":customElements.get(t(i))||u();break;case"mg-icon":customElements.get(t(i))||d();break;case"mg-input":customElements.get(t(i))||b();break;case"mg-input-title":customElements.get(t(i))||f();break;case"mg-tooltip":customElements.get(t(i))||v();break;case"mg-tooltip-content":customElements.get(t(i))||_()}}))}x();const y=w,z=x;export{y as MgInputTextarea,z as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as a,h as r}from"@stencil/core/internal/client";import{C as n,i as s,t as o}from"./index2.js";import{n as c}from"./index3.js";import{c as p,b as h,w as m,e as l}from"./mg-input.conf.js";import{i as g}from"./index4.js";import{d as u}from"./mg-character-left2.js";import{d}from"./mg-icon2.js";import{d as b}from"./mg-input2.js";import{d as f}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as _}from"./mg-tooltip-content2.js";const w=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=a(this,"value-change",7),this.inputValid=a(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.maxlength=4e3,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.rows=3,this.tooltipPosition="input",this.characterLeftHide=!1,this.resizable="none",this.classCollection=new n(["mg-c-input--textarea"]),this.handleInput=()=>{this.hasDisplayedError&&(this.checkValidity(),this.setErrorMessage()),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.getPatternValidity=()=>void 0===this.pattern||RegExp(`^${this.pattern}$`,"u").test(this.value),this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity()&&this.getPatternValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.getPatternValidity()?this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required):this.errorMessage=this.patternErrorMessage)}}handleValue(t){this.checkValidity(),this.valueChange.emit(t)}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,e){void 0!==this.input&&(this.input[e]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}validateDisabled(t){t?this.classCollection.add(h):this.classCollection.delete(h)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete("mg-c-input--width-"+t)})),void 0!==t&&this.classCollection.add("mg-c-input--width-"+this.mgWidth)}validatePattern(t){if(!(void 0===t||s(this.pattern)&&s(this.patternErrorMessage)))throw Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${o(this.pattern)}'" and "patternErrorMessage='${o(this.patternErrorMessage)}'".`)}validatecharacterLeftHide(t){t?this.classCollection.delete(l):this.classCollection.add(l)}async setFocus(){var t;null===(t=this.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-textarea> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!s(i))throw Error('<mg-input-textarea> 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="",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=g(this.element).messages,this.characterLeftId=this.identifier+"-character-left",c(this),this.validatecharacterLeftHide(this.characterLeftHide),this.validatePattern(this.pattern),this.validatePattern(this.patternErrorMessage),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.validateDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){return r("mg-input",{key:"36575f026a23722bb6d224aaeacf0e80d3e1bbfd",label:this.label,identifier:this.identifier,class:this.classCollection.join(),ariaDescribedbyIDs:this.characterLeftId,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.value&&r("b",{class:"mg-c-input__readonly-value"},this.value):r("div",{class:"mg-c-input__input-group-container"},r("textarea",{class:{"mg-c-input__box":!0,"mg-c-input__box--width":!0,"mg-c-input__box--resizable":"both"===this.resizable,"mg-c-input__box--resizable-horizontal":"horizontal"===this.resizable,"mg-c-input__box--resizable-vertical":"vertical"===this.resizable},value:this.value,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,rows:this.rows,maxlength:this.maxlength,disabled:this.disabled,required:this.required,"aria-invalid":""+(!0===this.invalid),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),!this.characterLeftHide&&this.maxlength>0&&r("mg-character-left",{identifier:this.characterLeftId,characters:this.value,maxlength:this.maxlength})))}get element(){return this}static get watchers(){return{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{validatePattern:0}],patternErrorMessage:[{validatePattern:0}],characterLeftHide:[{validatecharacterLeftHide:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.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}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-2) - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}"}},[1,"mg-input-textarea",{value:[1537],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],pattern:[1],patternErrorMessage:[1,"pattern-error-message"],rows:[2],tooltip:[1],tooltipPosition:[1,"tooltip-position"],characterLeftHide:[4,"character-left-hide"],helpText:[1,"help-text"],resizable:[1],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{validateDisabled:0}],mgWidth:[{watchMgWidth:0}],pattern:[{validatePattern:0}],patternErrorMessage:[{validatePattern:0}],characterLeftHide:[{validatecharacterLeftHide:0}]}]);function x(){"undefined"!=typeof customElements&&["mg-input-textarea","mg-character-left","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-textarea":customElements.get(t(i))||customElements.define(t(i),w);break;case"mg-character-left":customElements.get(t(i))||u();break;case"mg-icon":customElements.get(t(i))||d();break;case"mg-input":customElements.get(t(i))||b();break;case"mg-input-title":customElements.get(t(i))||f();break;case"mg-tooltip":customElements.get(t(i))||v();break;case"mg-tooltip-content":customElements.get(t(i))||_()}}))}x();const y=w,z=x;export{y as MgInputTextarea,z as defineCustomElement}

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

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as n,a as d,t as a}from"./index2.js";import{n as l}from"./index3.js";const r=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.isLegend=!1,this.tagName="label"}validateIdentifier(e){if(!n(e))throw new Error('<mg-input-title> prop "identifier" is required.');d(e)||console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${a(e)}.`)}validateIsLegend(e){this.tagName=e?"legend":"label"}componentWillLoad(){l(this),this.validateIdentifier(this.identifier),this.validateIsLegend(this.isLegend)}render(){return s(this.readonly?"span":this.tagName,{key:"316341d052fa751e442f749ce66e2712ecd864c2",class:"mg-c-input-title",htmlFor:!this.isLegend&&this.identifier,id:this.isLegend?`${this.identifier}-title`:void 0},s("slot",{key:"4df4df8d18f46b09081ebc13619034f923132697"}),this.required&&!this.readonly&&s("span",{key:"778a3317990278dd95a450dd9aa91c3afafb1b43",class:"mg-c-input-title__required"}," ",s("span",{key:"509a4ecc94111d61f3df3ae28286bf23bf8c7d0f",class:"mg-u-is-asterisk"},"*")))}get element(){return this}static get watchers(){return{identifier:[{validateIdentifier:0}],isLegend:[{validateIsLegend:0}]}}static get style(){return".mg-u-form-legacy.sc-mg-input-title{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:var(--mg-b-color-danger)}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-c-input-title-display, unset)}"}},[262,"mg-input-title",{identifier:[1],required:[4],readonly:[4],isLegend:[4,"is-legend"],tagName:[32]},void 0,{identifier:[{validateIdentifier:0}],isLegend:[{validateIsLegend:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-input-title"].forEach((t=>{"mg-input-title"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}c();export{r as M,c as d}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as a,a as n,t as d}from"./index2.js";import{n as l}from"./index3.js";const r=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.isLegend=!1,this.tagName="label"}validateIdentifier(e){if(!a(e))throw new Error('<mg-input-title> prop "identifier" is required.');n(e)||console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${d(e)}.`)}validateIsLegend(e){this.tagName=e?"legend":"label"}componentWillLoad(){l(this),this.validateIdentifier(this.identifier),this.validateIsLegend(this.isLegend)}render(){return s(this.readonly?"span":this.tagName,{key:"a3b4b081eb6612ae8f94e687d6ee55e0a4fc8747",class:"mg-c-input-title",htmlFor:!this.isLegend&&this.identifier,id:this.isLegend?`${this.identifier}-title`:void 0},s("slot",{key:"849858a8fca06a38cb33da241c52d29ad2af559b"}),this.required&&!this.readonly&&s("span",{key:"4b6a62fbe70f027a8123e512cfdaad5c37c8e94a",class:"mg-c-input-title__required"}," ",s("span",{key:"520b037e53779a58bc013f40d16ab724da734315",class:"mg-u-is-asterisk"},"*")))}get element(){return this}static get watchers(){return{identifier:[{validateIdentifier:0}],isLegend:[{validateIsLegend:0}]}}static get style(){return".mg-u-form-legacy.sc-mg-input-title{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:var(--mg-b-color-danger)}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-c-input-title-display, unset)}"}},[262,"mg-input-title",{identifier:[1],required:[4],readonly:[4],isLegend:[4,"is-legend"],tagName:[32]},void 0,{identifier:[{validateIdentifier:0}],isLegend:[{validateIsLegend:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-input-title"].forEach((t=>{"mg-input-title"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}c();export{r as M,c as d}

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

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as o,h as n}from"@stencil/core/internal/client";import{C as s,t as r,d as g,i as a}from"./index2.js";import{n as l}from"./index3.js";import{c as m,b as c}from"./mg-input.conf.js";import{d as h}from"./mg-icon2.js";import{d as u}from"./mg-input2.js";import{d as p}from"./mg-input-title2.js";import{d}from"./mg-tooltip2.js";import{d as b}from"./mg-tooltip-content2.js";const f=t=>"object"==typeof t&&"string"==typeof t.title,v=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=o(this,"value-change",7),this.inputValid=o(this,"input-valid",7),this.classIsActive="mg-c-input--toggle-is-active",this.classOnOff="mg-c-input--toggle-on-off",this.classIcon="mg-c-input--toggle-icon",this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.isOnOff=!1,this.isIcon=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new s(["mg-c-input--toggle"]),this.setErrorMessage=t=>{this.errorMessage=void 0,this.valid||"string"!=typeof t||(this.errorMessage=t)},this.handleSwitchButton=()=>{const t=this.getCurrentOptionIndex(this.value);this.value=this.options[0===t?1:0].value},this.validateSlots=()=>{const t=Array.from(this.element.children);if(2!==t.length){if(!this.isOnOff||!this.isIcon)throw Error("<mg-input-toggle> 2 slots are required.");if(null===this.element.querySelector('[slot="item-2"]'))throw Error('<mg-input-toggle> an element with attribute slot="item-2" is required.')}t.forEach(this.isIcon?t=>{"MG-ICON"===t.nodeName&&(t.size="small")}:t=>t.setAttribute("title",t.textContent))},this.getCurrentOptionIndex=t=>1===this.options.findIndex((i=>r(i.value)===r(t)))?1:0,this.isChecked=t=>1===this.getCurrentOptionIndex(t)}watchValue(t,i){""!==t?["true","false"].includes(t)&&this.options.every((t=>"boolean"==typeof t.value))?this.value="true"===t:(this.isChecked(t)?this.classCollection.add(this.classIsActive):this.classCollection.delete(this.classIsActive),r(t)!==r(i)&&this.valueChange.emit(t)):this.value=!0}watchItems(t){if("object"==typeof t&&2!==this.items.length)throw Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${r(t)}.`);if(g(t))this.options=t.map((t=>({title:t,value:t})));else{if(!Array.isArray(t)||!t.every(f))throw Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleOption. Passed value: ${r(t)}.`);this.options=t}}watchIsOnOff(t){t?(this.classCollection.add(this.classOnOff),this.isIcon||(this.isOnOff=!1,console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.'))):this.classCollection.delete(this.classOnOff)}watchIsIcon(t){t?this.classCollection.add(this.classIcon):this.classCollection.delete(this.classIcon)}watchReadonly(t){t?this.classCollection.add(m):this.classCollection.delete(m)}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}async setFocus(){var t;null===(t=this.button)||void 0===t||t.focus()}async setError(t,i){if("boolean"!=typeof t)throw Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!a(i))throw Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');this.valid=t,this.inputValid.emit(t),this.setErrorMessage(t?void 0:i)}async reset(){if(!this.readonly)return this.value=this.options[0].value,new Promise((t=>{requestAnimationFrame((()=>{this.errorMessage=void 0,t()}))}))}componentWillLoad(){l(this),this.watchItems(this.items),this.validateSlots(),this.watchValue(this.value),this.watchIsIcon(this.isIcon),this.watchIsOnOff(this.isOnOff),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled)}render(){const t=this.options[this.getCurrentOptionIndex(this.value)];return n("mg-input",{key:"09f0a48057d2c2a19b1f01e8e769592824afdd23",label:this.label,helpText:this.helpText,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:void 0,tooltip:this.tooltip,tooltipPosition:this.tooltipPosition,errorMessage:this.errorMessage},this.readonly?t&&n("b",{class:"mg-c-input__readonly-value"},t.title):n("button",{type:"button",role:"switch","aria-checked":""+this.isChecked(this.value),"aria-readonly":this.disabled||this.readonly,id:this.identifier,class:"mg-c-input__button-toggle",disabled:this.disabled||this.readonly,onClick:this.handleSwitchButton,ref:t=>{null!==t&&(this.button=t)}},n("span",{"aria-hidden":"true",class:"mg-c-input__toggle-item-container"},n("slot",{name:"item-1"})),n("span",{"aria-hidden":"true",class:"mg-c-input__toggle-item-container"},n("slot",{name:"item-2"}))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{watchItems:0}],isOnOff:[{watchIsOnOff:0}],isIcon:[{watchIsIcon:0}],readonly:[{watchReadonly:0}],disabled:[{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-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}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.1rem var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;line-height:var(--mg-b-size-16);text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}"}},[257,"mg-input-toggle",{value:[1040],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],isOnOff:[1028,"is-on-off"],isIcon:[4,"is-icon"],readonly:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],classCollection:[32],options:[32],errorMessage:[32],valid:[32],setFocus:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{watchItems:0}],isOnOff:[{watchIsOnOff:0}],isIcon:[{watchIsIcon:0}],readonly:[{watchReadonly:0}],disabled:[{watchDisabled:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-toggle","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-toggle":customElements.get(t(i))||customElements.define(t(i),v);break;case"mg-icon":customElements.get(t(i))||h();break;case"mg-input":customElements.get(t(i))||u();break;case"mg-input-title":customElements.get(t(i))||p();break;case"mg-tooltip":customElements.get(t(i))||d();break;case"mg-tooltip-content":customElements.get(t(i))||b()}}))}w();const y=v,_=w;export{y as MgInputToggle,_ as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as o,h as n}from"@stencil/core/internal/client";import{C as s,t as r,d as a,i as g}from"./index2.js";import{n as l}from"./index3.js";import{c as m,b as c}from"./mg-input.conf.js";import{d as h}from"./mg-icon2.js";import{d as u}from"./mg-input2.js";import{d as p}from"./mg-input-title2.js";import{d}from"./mg-tooltip2.js";import{d as b}from"./mg-tooltip-content2.js";const f=t=>"object"==typeof t&&"string"==typeof t.title,v=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=o(this,"value-change",7),this.inputValid=o(this,"input-valid",7),this.classIsActive="mg-c-input--toggle-is-active",this.classOnOff="mg-c-input--toggle-on-off",this.classIcon="mg-c-input--toggle-icon",this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.isOnOff=!1,this.isIcon=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new s(["mg-c-input--toggle"]),this.setErrorMessage=t=>{this.errorMessage=void 0,this.valid||"string"!=typeof t||(this.errorMessage=t)},this.handleSwitchButton=()=>{const t=this.getCurrentOptionIndex(this.value);this.value=this.options[0===t?1:0].value},this.validateSlots=()=>{const t=Array.from(this.element.children);if(2!==t.length){if(!this.isOnOff||!this.isIcon)throw Error("<mg-input-toggle> 2 slots are required.");if(null===this.element.querySelector('[slot="item-2"]'))throw Error('<mg-input-toggle> an element with attribute slot="item-2" is required.')}t.forEach(this.isIcon?t=>{"MG-ICON"===t.nodeName&&(t.size="small")}:t=>t.setAttribute("title",t.textContent))},this.getCurrentOptionIndex=t=>1===this.options.findIndex((i=>r(i.value)===r(t)))?1:0,this.isChecked=t=>1===this.getCurrentOptionIndex(t)}watchValue(t,i){""!==t?["true","false"].includes(t)&&this.options.every((t=>"boolean"==typeof t.value))?this.value="true"===t:(this.isChecked(t)?this.classCollection.add(this.classIsActive):this.classCollection.delete(this.classIsActive),r(t)!==r(i)&&this.valueChange.emit(t)):this.value=!0}watchItems(t){if("object"==typeof t&&2!==this.items.length)throw Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${r(t)}.`);if(a(t))this.options=t.map((t=>({title:t,value:t})));else{if(!Array.isArray(t)||!t.every(f))throw Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleOption. Passed value: ${r(t)}.`);this.options=t}}watchIsOnOff(t){t?(this.classCollection.add(this.classOnOff),this.isIcon||(this.isOnOff=!1,console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.'))):this.classCollection.delete(this.classOnOff)}watchIsIcon(t){t?this.classCollection.add(this.classIcon):this.classCollection.delete(this.classIcon)}watchReadonly(t){t?this.classCollection.add(m):this.classCollection.delete(m)}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}async setFocus(){var t;null===(t=this.button)||void 0===t||t.focus()}async setError(t,i){if("boolean"!=typeof t)throw Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!g(i))throw Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');this.valid=t,this.inputValid.emit(t),this.setErrorMessage(t?void 0:i)}async reset(){if(!this.readonly)return this.value=this.options[0].value,new Promise((t=>{requestAnimationFrame((()=>{this.errorMessage=void 0,t()}))}))}componentWillLoad(){l(this),this.watchItems(this.items),this.validateSlots(),this.watchValue(this.value),this.watchIsIcon(this.isIcon),this.watchIsOnOff(this.isOnOff),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled)}render(){const t=this.options[this.getCurrentOptionIndex(this.value)];return n("mg-input",{key:"5402a263042d7c4265d0dae810df6be6ae8d3f2a",label:this.label,helpText:this.helpText,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:void 0,tooltip:this.tooltip,tooltipPosition:this.tooltipPosition,errorMessage:this.errorMessage},this.readonly?t&&n("b",{class:"mg-c-input__readonly-value"},t.title):n("button",{type:"button",role:"switch","aria-checked":""+this.isChecked(this.value),"aria-readonly":this.disabled||this.readonly,id:this.identifier,class:"mg-c-input__button-toggle",disabled:this.disabled||this.readonly,onClick:this.handleSwitchButton,ref:t=>{null!==t&&(this.button=t)}},n("span",{"aria-hidden":"true",class:"mg-c-input__toggle-item-container"},n("slot",{name:"item-1"})),n("span",{"aria-hidden":"true",class:"mg-c-input__toggle-item-container"},n("slot",{name:"item-2"}))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{watchItems:0}],isOnOff:[{watchIsOnOff:0}],isIcon:[{watchIsIcon:0}],readonly:[{watchReadonly:0}],disabled:[{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-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}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.1rem var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;line-height:var(--mg-b-size-16);text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}"}},[257,"mg-input-toggle",{value:[1040],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],isOnOff:[1028,"is-on-off"],isIcon:[4,"is-icon"],readonly:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],classCollection:[32],options:[32],errorMessage:[32],valid:[32],setFocus:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{watchItems:0}],isOnOff:[{watchIsOnOff:0}],isIcon:[{watchIsIcon:0}],readonly:[{watchReadonly:0}],disabled:[{watchDisabled:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-toggle","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-toggle":customElements.get(t(i))||customElements.define(t(i),v);break;case"mg-icon":customElements.get(t(i))||h();break;case"mg-input":customElements.get(t(i))||u();break;case"mg-input-title":customElements.get(t(i))||p();break;case"mg-tooltip":customElements.get(t(i))||d();break;case"mg-tooltip-content":customElements.get(t(i))||b()}}))}w();const y=v,_=w;export{y as MgInputToggle,_ as defineCustomElement}

package/dist/components/mg-input2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,h as s,Host as n}from"@stencil/core/internal/client";import{i as a,t as o,a as r}from"./index2.js";import{n as h}from"./index3.js";import{l as m,t as l,a as p,c as g,b as c,d as u}from"./mg-input.conf.js";import{d}from"./mg-icon2.js";import{d as b}from"./mg-input-title2.js";import{d as _}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const w=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.slotLabel="label",this.slotError="error",this.slotHelpText="help-text",this.classInput="mg-c-input",this.classHasError="mg-c-input--has-error",this.classLabelOnTop="mg-c-input--label-on-top",this.classHasHeading="mg-c-input--has-heading",this.classLabelBorderDisplay="mg-c-input--label-border-display",this.classInputsOnBottom="mg-c-input--inputs-on-bottom",this.labelOnTop=!1,this.labelHide=!1,this.labelBorderDisplay=!1,this.tooltipPosition="input",this.required=!1,this.inputsOnBottom=!1,this.ariaDescribedbyIDs=[],this.isFieldset=!1,this.isReadonly=!1,this.isDisabled=!1,this.isVerticalList=!1,this.updateElementAriaDescribedby=(t,i)=>{i.size>0?t.setAttribute("aria-describedby",Array.from(i).join(" ")):t.removeAttribute("aria-describedby")},this.renderTooltip=()=>s("mg-tooltip",{identifier:`${this.identifier}-tooltip`,message:this.tooltip},s("mg-icon",{icon:"info-circle"})),this.inputContainerElements=()=>{const t=[this.helptextMessageSlotElement&&s("div",{class:"mg-c-input__help-text"},s("slot",{name:this.slotHelpText})),!this.isDisabled&&this.errorMessage&&s("div",{class:"mg-c-input__error","aria-live":"assertive"},s("slot",{name:this.slotError}))],i=s("div",{class:"mg-c-input__input"},s("slot",null),this.tooltip&&!this.labelOnTop&&("input"===this.tooltipPosition||this.labelHide)&&this.renderTooltip());return this.inputsOnBottom?[...t,i]:[i,...t]}}watchIdentifier(t){if(!a(t))throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${o(t)}.`);r(t)?(this.helpTextId=`${this.identifier}-help-text`,this.helpTextErrorId=`${this.identifier}-error`):console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${o(t)}.`)}watchLabelOnTop(t){t?this.element.classList.add(this.classLabelOnTop):this.element.classList.remove(this.classLabelOnTop)}watchLabelConfig(){if(this.labelHide&&this.labelOnTop)throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".')}watchlabelHeading(t){if(this.isFieldset&&this.labelOnTop&&m.includes(t))this.element.classList.add(this.classHasHeading);else{if(!this.isFieldset&&void 0!==t||"string"==typeof t)throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${m.join(", ")}. Passed value: ${o(t)}.`);this.labelHeading=void 0,this.element.classList.remove(this.classHasHeading)}}watchLabelBorderDisplay(t){this.isFieldset&&this.labelOnTop&&t?this.element.classList.add(this.classLabelBorderDisplay):this.element.classList.remove(this.classLabelBorderDisplay)}watchTooltipPosition(t){if(!l.includes(t))throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${l.join(", ")}. Passed value: ${o(t)}.`)}watchErrorMessage(t){var i;void 0!==t?(this.element.classList.add(this.classHasError),this.renderErrorMessage()):(this.element.classList.remove(this.classHasError),null===(i=this.errorMessageSlotElement)||void 0===i||i.remove(),this.errorMessageSlotElement=void 0)}watchHelpText(t){var i;a(t)&&!this.isReadonly?this.renderHelpText():(null===(i=this.helptextMessageSlotElement)||void 0===i||i.remove(),this.helptextMessageSlotElement=void 0)}watchInputsOnBottom(t){t?this.element.classList.add(this.classInputsOnBottom):this.element.classList.remove(this.classInputsOnBottom)}watchAriaDescribedbyIDs(){if(this.isReadonly)return;if("string"==typeof this.ariaDescribedbyIDs)return void(this.ariaDescribedbyIDs=this.ariaDescribedbyIDs.split(" "));if(!Array.isArray(this.ariaDescribedbyIDs)||!this.ariaDescribedbyIDs.every((t=>"string"==typeof t)))return void(this.ariaDescribedbyIDs=[]);const t=new Set(this.ariaDescribedbyIDs);a(this.helpText)&&(this.renderHelpText(),t.has(this.helpTextId)||t.add(this.helpTextId)),a(this.errorMessage)&&(this.renderErrorMessage(),t.has(this.helpTextErrorId)||t.add(this.helpTextErrorId)),this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach((i=>{this.updateElementAriaDescribedby(i,t)})),setTimeout((()=>{const i=this.element.querySelector("legend");null!==i&&this.updateElementAriaDescribedby(i,t)}))}watchClass(){this.element.classList.contains(this.classInput)||this.element.classList.add(this.classInput),this.isFieldset=this.element.classList.contains(p),this.isReadonly=this.element.classList.contains(g),this.isDisabled=this.element.classList.contains(c),this.isVerticalList=this.element.classList.contains(u)}watchLabel(){if(!a(this.label))throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${o(this.label)}.`);this.watchAriaDescribedbyIDs(),this.renderLabel()}renderLabel(){let t=this.element.querySelector(`[slot=${this.slotLabel}]`);if(null==t||t.remove(),t=document.createElement("mg-input-title"),t.setAttribute("slot",this.slotLabel),t.setAttribute("identifier",this.identifier),t.readonly=this.isReadonly,t.required=this.required&&!this.isDisabled||!1,t.isLegend=this.isFieldset,m.includes(this.labelHeading)){let i=this.element.shadowRoot.querySelector(this.labelHeading);null===i&&(i=document.createElement(this.labelHeading),i.classList.add("mg-c-input-title__text"),t.appendChild(i)),i.textContent=this.label}else t.textContent=this.label;this.element.appendChild(t),this.watchAriaDescribedbyIDs()}renderErrorMessage(){this.errorMessageSlotElement=this.element.querySelector(`[slot=${this.slotError}]`),null===this.errorMessageSlotElement&&(this.errorMessageSlotElement=document.createElement("div"),this.errorMessageSlotElement.setAttribute("slot",this.slotError),this.element.appendChild(this.errorMessageSlotElement)),this.errorMessageSlotElement.setAttribute("id",this.helpTextErrorId),this.errorMessageSlotElement.innerHTML=this.errorMessage}renderHelpText(){this.helptextMessageSlotElement=this.element.querySelector(`[slot=${this.slotHelpText}]`),null===this.helptextMessageSlotElement&&(this.helptextMessageSlotElement=document.createElement("div"),this.helptextMessageSlotElement.setAttribute("slot",this.slotHelpText),this.element.appendChild(this.helptextMessageSlotElement)),this.helptextMessageSlotElement.setAttribute("id",this.helpTextId),this.helptextMessageSlotElement.innerHTML=this.helpText}componentWillLoad(){h(this),this.watchIdentifier(this.identifier),this.watchLabel(),this.watchClass(),this.watchLabelOnTop(this.labelOnTop),this.watchLabelConfig(),this.watchTooltipPosition(this.tooltipPosition),this.watchHelpText(this.helpText),this.watchErrorMessage(this.errorMessage),this.watchInputsOnBottom(this.inputsOnBottom),this.watchlabelHeading(this.labelHeading),this.watchLabelBorderDisplay(this.labelBorderDisplay)}componentDidLoad(){if(this.watchAriaDescribedbyIDs(),!this.isReadonly&&!this.isFieldset&&null===this.element.querySelector(`#${this.identifier}`))throw new Error(`<mg-input> "identifier" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`)}render(){const t=this.isFieldset&&!this.isReadonly;return s(n,{key:"b5952c998fe8562eb2e5dc0e425484f0aa9177f3",class:this.element.classList.toString(),role:t?"group":void 0,"aria-labelledby":t?`${this.identifier}-title`:void 0},s("div",{key:"d6399c7f4798af37639218373f775739fc04e593",class:{"mg-c-input__title":!0,"mg-u-visually-hidden":this.labelHide}},s("slot",{key:"58a593bb16193a5ca6b0374919b22fa64aab26a4",name:this.slotLabel}),this.tooltip&&("label"===this.tooltipPosition||this.labelOnTop)&&!this.labelHide&&this.renderTooltip()),s("div",{key:"1a70d0b00d6cf235c7a64d3ebde212eef62e213c",class:"mg-c-input__input-container"},this.inputContainerElements()))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0},{watchAriaDescribedbyIDs:0}],labelOnTop:[{watchLabelOnTop:0},{watchLabelConfig:0}],labelHide:[{watchLabelConfig:0}],labelHeading:[{watchlabelHeading:0}],labelBorderDisplay:[{watchLabelBorderDisplay:0}],tooltipPosition:[{watchTooltipPosition:0}],errorMessage:[{watchErrorMessage:0},{watchAriaDescribedbyIDs:0}],helpText:[{watchHelpText:0},{watchAriaDescribedbyIDs:0}],inputsOnBottom:[{watchInputsOnBottom:0}],ariaDescribedbyIDs:[{watchAriaDescribedbyIDs:0}],class:[{watchClass:0},{watchLabel:0}],label:[{watchLabel:0}],required:[{watchLabel:0}],isReadonly:[{watchLabel:0}],isFieldset:[{watchLabel:0}]}}static get style(){return".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}}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host .mg-c-input__input+.mg-c-input__error,:host .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-size-8);margin-bottom:var(--mg-b-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}"}},[257,"mg-input",{identifier:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],labelHeading:[1025,"label-heading"],labelBorderDisplay:[4,"label-border-display"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],required:[4],errorMessage:[1,"error-message"],helpText:[1,"help-text"],inputsOnBottom:[4,"inputs-on-bottom"],ariaDescribedbyIDs:[1025,"aria-describedby-i-ds"],isFieldset:[32],isReadonly:[32],isDisabled:[32],isVerticalList:[32]},void 0,{identifier:[{watchIdentifier:0},{watchAriaDescribedbyIDs:0}],labelOnTop:[{watchLabelOnTop:0},{watchLabelConfig:0}],labelHide:[{watchLabelConfig:0}],labelHeading:[{watchlabelHeading:0}],labelBorderDisplay:[{watchLabelBorderDisplay:0}],tooltipPosition:[{watchTooltipPosition:0}],errorMessage:[{watchErrorMessage:0},{watchAriaDescribedbyIDs:0}],helpText:[{watchHelpText:0},{watchAriaDescribedbyIDs:0}],inputsOnBottom:[{watchInputsOnBottom:0}],ariaDescribedbyIDs:[{watchAriaDescribedbyIDs:0}],class:[{watchClass:0},{watchLabel:0}],label:[{watchLabel:0}],required:[{watchLabel:0}],isReadonly:[{watchLabel:0}],isFieldset:[{watchLabel:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-input","mg-icon","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input":customElements.get(t(i))||customElements.define(t(i),w);break;case"mg-icon":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||b();break;case"mg-tooltip":customElements.get(t(i))||_();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}v();export{w as M,v as d}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,h as s,Host as n}from"@stencil/core/internal/client";import{i as a,t as o,a as r}from"./index2.js";import{n as h}from"./index3.js";import{l,t as m,a as p,c as g,b as c,d as u}from"./mg-input.conf.js";import{d}from"./mg-icon2.js";import{d as b}from"./mg-input-title2.js";import{d as _}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const w=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.slotLabel="label",this.slotError="error",this.slotHelpText="help-text",this.blockLevelContentRegExp=/<(address|article|aside|blockquote|details|dialog|div|dl|fieldset|figure|figcaption|footer|form|h[1-6]|header|hr|main|nav|ol|p|pre|section|table|ul)[\s/>]/i,this.classInput="mg-c-input",this.classHasError="mg-c-input--has-error",this.classLabelOnTop="mg-c-input--label-on-top",this.classHasHeading="mg-c-input--has-heading",this.classLabelBorderDisplay="mg-c-input--label-border-display",this.classInputsOnBottom="mg-c-input--inputs-on-bottom",this.labelOnTop=!1,this.labelHide=!1,this.labelBorderDisplay=!1,this.tooltipPosition="input",this.required=!1,this.inputsOnBottom=!1,this.ariaDescribedbyIDs=[],this.isFieldset=!1,this.isReadonly=!1,this.isDisabled=!1,this.isVerticalList=!1,this.updateElementAriaDescribedby=(t,i)=>{i.size>0?t.setAttribute("aria-describedby",Array.from(i).join(" ")):t.removeAttribute("aria-describedby")},this.renderTooltip=()=>s("mg-tooltip",{identifier:`${this.identifier}-tooltip`,message:this.tooltip},s("mg-icon",{icon:"info-circle-outline"})),this.inputContainerElements=()=>{const t=[this.helptextMessageSlotElement&&s("div",{class:"mg-c-input__help-text"},s("slot",{name:this.slotHelpText})),!this.isDisabled&&this.errorMessage&&s("div",{class:"mg-c-input__error","aria-live":"assertive"},s("slot",{name:this.slotError}))],i=s("div",{class:"mg-c-input__input"},s("slot",null),this.tooltip&&!this.labelOnTop&&("input"===this.tooltipPosition||this.labelHide)&&this.renderTooltip());return this.inputsOnBottom?[...t,i]:[i,...t]}}watchIdentifier(t){if(!a(t))throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${o(t)}.`);r(t)?(this.helpTextId=`${this.identifier}-help-text`,this.helpTextErrorId=`${this.identifier}-error`):console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${o(t)}.`)}watchLabelOnTop(t){t?this.element.classList.add(this.classLabelOnTop):this.element.classList.remove(this.classLabelOnTop)}watchLabelConfig(){if(this.labelHide&&this.labelOnTop)throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".')}watchlabelHeading(t){if(this.isFieldset&&this.labelOnTop&&l.includes(t))this.element.classList.add(this.classHasHeading);else{if(!this.isFieldset&&void 0!==t||"string"==typeof t)throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${l.join(", ")}. Passed value: ${o(t)}.`);this.labelHeading=void 0,this.element.classList.remove(this.classHasHeading)}}watchLabelBorderDisplay(t){this.isFieldset&&this.labelOnTop&&t?this.element.classList.add(this.classLabelBorderDisplay):this.element.classList.remove(this.classLabelBorderDisplay)}watchTooltipPosition(t){if(!m.includes(t))throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${m.join(", ")}. Passed value: ${o(t)}.`)}watchErrorMessage(t){var i;void 0!==t?(this.element.classList.add(this.classHasError),this.renderErrorMessage()):(this.element.classList.remove(this.classHasError),null===(i=this.errorMessageSlotElement)||void 0===i||i.remove(),this.errorMessageSlotElement=void 0)}watchHelpText(t){var i;a(t)&&!this.isReadonly?this.renderHelpText():(null===(i=this.helptextMessageSlotElement)||void 0===i||i.remove(),this.helptextMessageSlotElement=void 0)}watchInputsOnBottom(t){t?this.element.classList.add(this.classInputsOnBottom):this.element.classList.remove(this.classInputsOnBottom)}watchAriaDescribedbyIDs(){if(this.isReadonly)return;if("string"==typeof this.ariaDescribedbyIDs)return void(this.ariaDescribedbyIDs=this.ariaDescribedbyIDs.split(" "));if(!Array.isArray(this.ariaDescribedbyIDs)||!this.ariaDescribedbyIDs.every((t=>"string"==typeof t)))return void(this.ariaDescribedbyIDs=[]);const t=new Set(this.ariaDescribedbyIDs);a(this.helpText)&&(this.renderHelpText(),t.has(this.helpTextId)||t.add(this.helpTextId)),a(this.errorMessage)&&(this.renderErrorMessage(),t.has(this.helpTextErrorId)||t.add(this.helpTextErrorId)),this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach((i=>{this.updateElementAriaDescribedby(i,t)})),setTimeout((()=>{const i=this.element.querySelector("legend");null!==i&&this.updateElementAriaDescribedby(i,t)}))}watchClass(){this.element.classList.contains(this.classInput)||this.element.classList.add(this.classInput),this.isFieldset=this.element.classList.contains(p),this.isReadonly=this.element.classList.contains(g),this.isDisabled=this.element.classList.contains(c),this.isVerticalList=this.element.classList.contains(u)}watchLabel(){if(!a(this.label))throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${o(this.label)}.`);this.watchAriaDescribedbyIDs(),this.renderLabel()}renderLabel(){let t=this.element.querySelector(`[slot=${this.slotLabel}]`);if(null==t||t.remove(),t=document.createElement("mg-input-title"),t.setAttribute("slot",this.slotLabel),t.setAttribute("identifier",this.identifier),t.readonly=this.isReadonly,t.required=this.required&&!this.isDisabled||!1,t.isLegend=this.isFieldset,l.includes(this.labelHeading)){let i=this.element.shadowRoot.querySelector(this.labelHeading);null===i&&(i=document.createElement(this.labelHeading),i.classList.add("mg-c-input-title__text"),t.appendChild(i)),i.textContent=this.label}else t.textContent=this.label;this.element.appendChild(t),this.watchAriaDescribedbyIDs()}getSlotMessageTagName(t){return this.blockLevelContentRegExp.test(t)?"div":"p"}getSlotMessageElement(t,i){let e=this.element.querySelector(`[slot=${t}]`);return null!==e&&e.tagName.toLowerCase()!==i&&(e.remove(),e=null),null===e&&(e=document.createElement(i),e.setAttribute("slot",t),this.element.appendChild(e)),e}renderErrorMessage(){this.errorMessageSlotElement=this.getSlotMessageElement(this.slotError,this.getSlotMessageTagName(this.errorMessage)),this.errorMessageSlotElement.setAttribute("id",this.helpTextErrorId),this.errorMessageSlotElement.innerHTML=this.errorMessage}renderHelpText(){this.helptextMessageSlotElement=this.getSlotMessageElement(this.slotHelpText,this.getSlotMessageTagName(this.helpText)),this.helptextMessageSlotElement.setAttribute("id",this.helpTextId),this.helptextMessageSlotElement.innerHTML=this.helpText}componentWillLoad(){h(this),this.watchIdentifier(this.identifier),this.watchLabel(),this.watchClass(),this.watchLabelOnTop(this.labelOnTop),this.watchLabelConfig(),this.watchTooltipPosition(this.tooltipPosition),this.watchHelpText(this.helpText),this.watchErrorMessage(this.errorMessage),this.watchInputsOnBottom(this.inputsOnBottom),this.watchlabelHeading(this.labelHeading),this.watchLabelBorderDisplay(this.labelBorderDisplay)}componentDidLoad(){if(this.watchAriaDescribedbyIDs(),!this.isReadonly&&!this.isFieldset&&null===this.element.querySelector(`#${this.identifier}`))throw new Error(`<mg-input> "identifier" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`)}render(){const t=this.isFieldset&&!this.isReadonly;return s(n,{key:"e5803717999bac5e4a08910008176baeb426f634",class:this.element.classList.toString(),role:t?"group":void 0,"aria-labelledby":t?`${this.identifier}-title`:void 0},s("div",{key:"32b04b05e8a4352536965fcd792f3c206dad9270",class:{"mg-c-input__title":!0,"mg-u-visually-hidden":this.labelHide}},s("slot",{key:"2bb360ff8b4a86facb0b7f97fdf7dbbb49b5f6c0",name:this.slotLabel}),this.tooltip&&("label"===this.tooltipPosition||this.labelOnTop)&&!this.labelHide&&this.renderTooltip()),s("div",{key:"0c6751757d182029e1ac6ea4f8a4fcc7aeffb85e",class:"mg-c-input__input-container"},this.inputContainerElements()))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0},{watchAriaDescribedbyIDs:0}],labelOnTop:[{watchLabelOnTop:0},{watchLabelConfig:0}],labelHide:[{watchLabelConfig:0}],labelHeading:[{watchlabelHeading:0}],labelBorderDisplay:[{watchLabelBorderDisplay:0}],tooltipPosition:[{watchTooltipPosition:0}],errorMessage:[{watchErrorMessage:0},{watchAriaDescribedbyIDs:0}],helpText:[{watchHelpText:0},{watchAriaDescribedbyIDs:0}],inputsOnBottom:[{watchInputsOnBottom:0}],ariaDescribedbyIDs:[{watchAriaDescribedbyIDs:0}],class:[{watchClass:0},{watchLabel:0}],label:[{watchLabel:0}],required:[{watchLabel:0}],isReadonly:[{watchLabel:0}],isFieldset:[{watchLabel:0}]}}static get style(){return".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}}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){margin:0;font-size:var(--mg-b-font-size-small);text-align:start}:host .mg-c-input__input+.mg-c-input__error,:host .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--fieldset) ::slotted(.mg-c-input__input-group){min-width:0;flex-grow:1}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-size-8);margin-bottom:var(--mg-b-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}"}},[257,"mg-input",{identifier:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],labelHeading:[1025,"label-heading"],labelBorderDisplay:[4,"label-border-display"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],required:[4],errorMessage:[1,"error-message"],helpText:[1,"help-text"],inputsOnBottom:[4,"inputs-on-bottom"],ariaDescribedbyIDs:[1025,"aria-describedby-i-ds"],isFieldset:[32],isReadonly:[32],isDisabled:[32],isVerticalList:[32]},void 0,{identifier:[{watchIdentifier:0},{watchAriaDescribedbyIDs:0}],labelOnTop:[{watchLabelOnTop:0},{watchLabelConfig:0}],labelHide:[{watchLabelConfig:0}],labelHeading:[{watchlabelHeading:0}],labelBorderDisplay:[{watchLabelBorderDisplay:0}],tooltipPosition:[{watchTooltipPosition:0}],errorMessage:[{watchErrorMessage:0},{watchAriaDescribedbyIDs:0}],helpText:[{watchHelpText:0},{watchAriaDescribedbyIDs:0}],inputsOnBottom:[{watchInputsOnBottom:0}],ariaDescribedbyIDs:[{watchAriaDescribedbyIDs:0}],class:[{watchClass:0},{watchLabel:0}],label:[{watchLabel:0}],required:[{watchLabel:0}],isReadonly:[{watchLabel:0}],isFieldset:[{watchLabel:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-input","mg-icon","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input":customElements.get(t(i))||customElements.define(t(i),w);break;case"mg-icon":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||b();break;case"mg-tooltip":customElements.get(t(i))||_();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}v();export{w as M,v as d}

package/dist/components/mg-item-more2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,h as o,Host as s}from"@stencil/core/internal/client";import{t as m}from"./index2.js";import{d as r,a}from"./mg-menu-item2.js";import{i as n}from"./index4.js";import{d as c}from"./mg-badge2.js";import{d as l}from"./mg-button2.js";import{d as h}from"./mg-card2.js";import{d}from"./mg-icon2.js";import{d as u}from"./mg-popover2.js";import{d as p}from"./mg-popover-content2.js";class g{constructor(t,e,i){if(this.parentElement=t,this.itemMoreElement=e,this.itemMoreContainerElement=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.isMoreElement=t=>t===this.itemMoreElement,this.isOverflowElement=(t,e)=>{const i=this.itemMoreContainerElement.children.length>0;return this.isMoreElement(e)?!i:"MG-ITEM-MORE"===e.nextElementSibling.nodeName||i?t>this._availableWidth:t+this.itemMoreElement.offsetWidth>this._availableWidth},this.toggleItem=(t,e)=>{this.isMoreElement(t)&&e?t.setAttribute("hidden",""):this.isMoreElement(t)&&!e?t.removeAttribute("hidden"):!this.isMoreElement(t)&&e?this.itemMoreContainerElement.appendChild(t):this.isMoreElement(t)||t.parentElement===this.parentElement||this.parentElement.insertBefore(t,this.itemMoreElement)},null===this.parentElement||null===this.itemMoreElement||null===this.itemMoreContainerElement)throw new Error("OverflowBehavior - all constructor params are required");const o=Array.from(this.parentElement.children);this._resizeObserver=new ResizeObserver((t=>{this._availableWidth=t.map((t=>t.contentRect.width)).sort(((t,e)=>t-e)).shift(),o.forEach((t=>this.toggleItem(t,!1)));let e=0;o.forEach(((t,i)=>{e+=t.offsetWidth,i>0&&this.toggleItem(t,this.isOverflowElement(e,t))}))})),this._resizeObserver.observe(this.parentElement)}}const b=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-menu",this.direction="horizontal",this.isChildMenu=()=>null!==this.element.closest("mg-menu-item"),this.getMenuItems=(t=this.element)=>{var e,i;const o=Array.from(t.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),s=null===(i=null===(e=t.querySelector("mg-item-more"))||void 0===e?void 0:e.shadowRoot)||void 0===i?void 0:i.querySelector("mg-menu-item");return null!=s&&o.push(s),o},this.updateMenuItems=()=>{this.getMenuItems().forEach((t=>{t.dataset.styleDirection=this.direction})),this.renderMgItemMore()},this.renderMgItemMore=()=>{if(this.direction===a.VERTICAL||this.direction===a.HORIZONTAL&&this.isChildMenu()||this.element.children.length<=1)return;let t=this.element.querySelector("mg-item-more");null===t&&(t=document.createElement("mg-item-more"),this.element.appendChild(t));for(const e in this.itemmore)t[e]=this.itemmore[e]}}validateLabel(t){if(void 0===t&&!this.element.hasAttribute("aria-label"))throw new Error(`<${this.name}> prop "label" is required. Passed value: ${m(t)}.`)}validateDirection(t){if(![a.VERTICAL,a.HORIZONTAL].includes(t))throw new Error(`<${this.name}> prop "direction" must be one of: ${a.HORIZONTAL}, ${a.VERTICAL}. Passed value: ${m(t)}.`);this.updateMenuItems()}validateItemMore(t){if(void 0!==t&&this.direction!==a.HORIZONTAL)throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${a.HORIZONTAL}.`);void 0!==t&&this.renderMgItemMore()}updateItemListener(t){if("MG-ACTION-MORE"===t.target.nodeName)return;const e="MG-ITEM-MORE"===t.target.nodeName?t.target.shadowRoot.querySelector("mg-menu-item"):t.target;["click","focus"].forEach((i=>{e.addEventListener(i,(()=>{const i=t.target.closest("mg-menu").querySelector("[data-has-focus]");i!==e&&(null!==i&&i.removeAttribute("data-has-focus"),e.setAttribute("data-has-focus","true"))}))}))}componentWillLoad(){this.validateDirection(this.direction),this.validateLabel(this.label),this.validateItemMore(this.itemmore)}componentDidLoad(){this.updateMenuItems(),this.isChildMenu()||this.direction!==a.HORIZONTAL||document.addEventListener("focusin",(t=>{const e=t=>t===this.element||null!==t.parentElement&&e(t.parentElement);if(null===t.target.closest("mg-menu")||!e(t.target)){const t=this.element.querySelector("[data-has-focus]");null!==t&&t.removeAttribute("data-has-focus")}})),new MutationObserver(this.updateMenuItems).observe(this.element,{childList:!0})}render(){return o(s,{key:"c16a69485fabb9a7a91efe032501fafa98862882",role:"list","aria-label":this.label},o("slot",{key:"f5bca6fdb93d9273e5fcc753d2c58c0a0504c0d0"}))}get element(){return this}static get watchers(){return{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}]}}static get style(){return".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}}:host{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;gap:.2rem;overflow-y:auto}"}},[257,"mg-menu",{label:[1],direction:[513],size:[16],itemmore:[16]},[[0,"item-loaded","updateItemListener"]],{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-menu","mg-badge","mg-button","mg-card","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-menu":customElements.get(t(e))||customElements.define(t(e),b);break;case"mg-badge":customElements.get(t(e))||c();break;case"mg-button":customElements.get(t(e))||l();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||d();break;case"mg-item-more":customElements.get(t(e))||E();break;case"mg-menu":customElements.get(t(e))||f();break;case"mg-menu-item":customElements.get(t(e))||r();break;case"mg-popover":customElements.get(t(e))||u();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}f();const v=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-item-more",this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1}}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${m(t)}.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${m(t)}.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.menuLabel)}componentWillLoad(){this.messages=n(this.element).messages.itemMore,this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel)}componentDidLoad(){return setTimeout((()=>{this.parentMenu=this.element.closest("mg-menu")}))}componentDidUpdate(){this.parentMenu&&void 0===this.overflowBehavior&&(this.overflowBehavior=new g(this.parentMenu,this.element,this.itemMoreContainer))}disconnectedCallback(){var t;null===(t=this.overflowBehavior)||void 0===t||t.disconnect()}render(){const t="mg-item-more";return o(s,{key:"85f8bf18855610a31c4afc0051886c5020d9a1b6",role:"listitem","data-mg-popover-guard":`${t}-popover`},this.parentMenu&&o("mg-menu-item",{key:"10d8d6ca20df0cba51f601bdafe0260e48842fa3","data-overflow-more":!0,"data-style-direction":a.HORIZONTAL,identifier:t,isIcon:!this.slotlabel.display},o("mg-icon",{key:"f957f3179d07df707e871e44e26eddcb911521e4",icon:this.icon.icon,slot:"image"}),o("span",{key:"af9d0b934313b28983b650d58baa5b83b937836a",class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),o("mg-menu",{key:"181445f2ee43b78ce041225f2394618c8eacf5d1",direction:a.VERTICAL,label:this.messages.menuLabel,ref:t=>{null!==t&&(this.itemMoreContainer=t)}})))}get element(){return this}static get watchers(){return{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}]}}static get style(){return".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}}:host:not([hidden]){display:flex}"}},[1,"mg-item-more",{icon:[16],slotlabel:[16],parentMenu:[32]},void 0,{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}]}]);function E(){"undefined"!=typeof customElements&&["mg-item-more","mg-badge","mg-button","mg-card","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-item-more":customElements.get(t(e))||customElements.define(t(e),v);break;case"mg-badge":customElements.get(t(e))||c();break;case"mg-button":customElements.get(t(e))||l();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||d();break;case"mg-item-more":customElements.get(t(e))||E();break;case"mg-menu":customElements.get(t(e))||f();break;case"mg-menu-item":customElements.get(t(e))||r();break;case"mg-popover":customElements.get(t(e))||u();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}E();export{v as M,b as a,f as b,E as d}
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,h as o,Host as s}from"@stencil/core/internal/client";import{t as m}from"./index2.js";import{d as n,a}from"./mg-menu-item2.js";import{i as r}from"./index4.js";import{d as l}from"./mg-badge2.js";import{d as c}from"./mg-button2.js";import{d as h}from"./mg-card2.js";import{d}from"./mg-icon2.js";import{d as u}from"./mg-popover2.js";import{d as p}from"./mg-popover-content2.js";class g{constructor(t,e,i){if(this.parentElement=t,this.itemMoreElement=e,this.itemMoreContainerElement=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.isMoreElement=t=>t===this.itemMoreElement,this.isOverflowElement=(t,e)=>{const i=this.itemMoreContainerElement.children.length>0;return this.isMoreElement(e)?!i:"MG-ITEM-MORE"===e.nextElementSibling.nodeName||i?t>this._availableWidth:t+this.itemMoreElement.offsetWidth>this._availableWidth},this.toggleItem=(t,e)=>{this.isMoreElement(t)&&e?t.setAttribute("hidden",""):this.isMoreElement(t)&&!e?t.removeAttribute("hidden"):!this.isMoreElement(t)&&e?this.itemMoreContainerElement.appendChild(t):this.isMoreElement(t)||t.parentElement===this.parentElement||this.parentElement.insertBefore(t,this.itemMoreElement)},null===this.parentElement||null===this.itemMoreElement||null===this.itemMoreContainerElement)throw new Error("OverflowBehavior - all constructor params are required");const o=Array.from(this.parentElement.children);this._resizeObserver=new ResizeObserver((t=>{this._availableWidth=t.map((t=>t.contentRect.width)).sort(((t,e)=>t-e)).shift(),o.forEach((t=>this.toggleItem(t,!1)));let e=0;o.forEach(((t,i)=>{e+=t.offsetWidth,i>0&&this.toggleItem(t,this.isOverflowElement(e,t))}))})),this._resizeObserver.observe(this.parentElement)}}const b=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-menu",this.direction="horizontal",this.isChildMenu=()=>null!==this.element.closest("mg-menu-item"),this.getMenuItems=(t=this.element)=>{var e,i;const o=Array.from(t.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),s=null===(i=null===(e=t.querySelector("mg-item-more"))||void 0===e?void 0:e.shadowRoot)||void 0===i?void 0:i.querySelector("mg-menu-item");return null!=s&&o.push(s),o},this.updateMenuItems=()=>{this.getMenuItems().forEach((t=>{t.dataset.styleDirection=this.direction})),this.renderMgItemMore()},this.renderMgItemMore=()=>{if(this.direction===a.VERTICAL||this.direction===a.HORIZONTAL&&this.isChildMenu()||this.element.children.length<=1)return;let t=this.element.querySelector("mg-item-more");null===t&&(t=document.createElement("mg-item-more"),this.element.appendChild(t));for(const e in this.itemmore)t[e]=this.itemmore[e]}}validateLabel(t){if(void 0===t&&!this.element.hasAttribute("aria-label"))throw new Error(`<${this.name}> prop "label" is required. Passed value: ${m(t)}.`)}validateDirection(t){if(![a.VERTICAL,a.HORIZONTAL].includes(t))throw new Error(`<${this.name}> prop "direction" must be one of: ${a.HORIZONTAL}, ${a.VERTICAL}. Passed value: ${m(t)}.`);this.updateMenuItems()}validateItemMore(t){if(void 0!==t&&this.direction!==a.HORIZONTAL)throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${a.HORIZONTAL}.`);void 0!==t&&this.renderMgItemMore()}updateItemListener(t){if("MG-ACTION-MORE"===t.target.nodeName)return;const e="MG-ITEM-MORE"===t.target.nodeName?t.target.shadowRoot.querySelector("mg-menu-item"):t.target;["click","focus"].forEach((i=>{e.addEventListener(i,(()=>{const i=t.target.closest("mg-menu").querySelector("[data-has-focus]");i!==e&&(null!==i&&i.removeAttribute("data-has-focus"),e.setAttribute("data-has-focus","true"))}))}))}componentWillLoad(){this.validateDirection(this.direction),this.validateLabel(this.label),this.validateItemMore(this.itemmore)}componentDidLoad(){this.updateMenuItems(),this.isChildMenu()||this.direction!==a.HORIZONTAL||document.addEventListener("focusin",(t=>{const e=t=>t===this.element||null!==t.parentElement&&e(t.parentElement);if(null===t.target.closest("mg-menu")||!e(t.target)){const t=this.element.querySelector("[data-has-focus]");null!==t&&t.removeAttribute("data-has-focus")}})),new MutationObserver(this.updateMenuItems).observe(this.element,{childList:!0})}render(){return o(s,{key:"967fc6e01207c5831b7821ccb17db8406cabc262",role:"list","aria-label":this.label},o("slot",{key:"9699944cbe1b25434c3ddc6235dae7676b7acb6b"}))}get element(){return this}static get watchers(){return{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}]}}static get style(){return".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}}:host{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;gap:var(--mg-b-size-2);overflow-y:auto}"}},[257,"mg-menu",{label:[1],direction:[513],size:[16],itemmore:[16]},[[0,"item-loaded","updateItemListener"]],{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-menu","mg-badge","mg-button","mg-card","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-menu":customElements.get(t(e))||customElements.define(t(e),b);break;case"mg-badge":customElements.get(t(e))||l();break;case"mg-button":customElements.get(t(e))||c();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||d();break;case"mg-item-more":customElements.get(t(e))||E();break;case"mg-menu":customElements.get(t(e))||f();break;case"mg-menu-item":customElements.get(t(e))||n();break;case"mg-popover":customElements.get(t(e))||u();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}f();const v=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-item-more",this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1}}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${m(t)}.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${m(t)}.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.menuLabel)}componentWillLoad(){this.messages=r(this.element).messages.itemMore,this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel)}componentDidLoad(){return setTimeout((()=>{this.parentMenu=this.element.closest("mg-menu")}))}componentDidUpdate(){this.parentMenu&&void 0===this.overflowBehavior&&(this.overflowBehavior=new g(this.parentMenu,this.element,this.itemMoreContainer))}disconnectedCallback(){var t;null===(t=this.overflowBehavior)||void 0===t||t.disconnect()}render(){const t="mg-item-more";return o(s,{key:"54d11a95e5edc3a45e98541ffc827264e40bc5ec",role:"listitem","data-mg-popover-guard":`${t}-popover`},this.parentMenu&&o("mg-menu-item",{key:"636e1c03e907071e72766b7ee359f3f93d3df6ae","data-overflow-more":!0,"data-style-direction":a.HORIZONTAL,identifier:t,isIcon:!this.slotlabel.display},o("mg-icon",{key:"e751b58f50a3625f6e23b5993a50f8d0c2fb4660",icon:this.icon.icon,slot:"image"}),o("span",{key:"bc429c525afced68fb5a7668cad3741699216b97",class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),o("mg-menu",{key:"05760816f84ef6b6c5d18d058a110b6ec2d182e3",direction:a.VERTICAL,label:this.messages.menuLabel,ref:t=>{null!==t&&(this.itemMoreContainer=t)}})))}get element(){return this}static get watchers(){return{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}]}}static get style(){return".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}}:host:not([hidden]){display:flex}"}},[1,"mg-item-more",{icon:[16],slotlabel:[16],parentMenu:[32]},void 0,{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}]}]);function E(){"undefined"!=typeof customElements&&["mg-item-more","mg-badge","mg-button","mg-card","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-item-more":customElements.get(t(e))||customElements.define(t(e),v);break;case"mg-badge":customElements.get(t(e))||l();break;case"mg-button":customElements.get(t(e))||c();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||d();break;case"mg-item-more":customElements.get(t(e))||E();break;case"mg-menu":customElements.get(t(e))||f();break;case"mg-menu-item":customElements.get(t(e))||n();break;case"mg-popover":customElements.get(t(e))||u();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}E();export{v as M,b as a,f as b,E as d}

package/dist/components/mg-loader2.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as t,HTMLElement as a,h as i}from"@stencil/core/internal/client";import{i as s}from"./index4.js";import{i as r,t as n}from"./index2.js";import{d as o}from"./mg-icon2.js";const m=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.messageHide=!1}watchMessage(e){if(e&&!r(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${n(e)}.`)}componentWillLoad(){this.messages=s(this.element).messages,this.watchMessage(this.message)}render(){return i("div",{key:"739b4cbacd8a8da056dbb1445c40fac2cf26766a",class:"mg-c-loader","aria-live":"polite"},i("mg-icon",{key:"95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba",icon:"loader",spin:!0}),i("span",{key:"f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return this}static get watchers(){return{message:[{watchMessage:0}]}}static get style(){return".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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}"}},[1,"mg-loader",{message:[1],messageHide:[4,"message-hide"]},void 0,{message:[{watchMessage:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-loader","mg-icon"].forEach((t=>{switch(t){case"mg-loader":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||o()}}))}c();export{m as M,c as d}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as a}from"./index4.js";import{i as n,t as o}from"./index2.js";import{d as r}from"./mg-icon2.js";const m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.messageHide=!1}watchMessage(e){if(e&&!n(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${o(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return s("div",{key:"a2e3880baccec9691a9fd6abbdb9e01d452136aa",class:"mg-c-loader","aria-live":"polite"},s("mg-icon",{key:"044153b87e799f1f51cb3c9c6236bf6b8b328cf5",icon:"loader",spin:!0}),s("span",{key:"5e4293bd33bd2a51b7557ebf26037991e4fc853e",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return this}static get watchers(){return{message:[{watchMessage:0}]}}static get style(){return".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}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}"}},[1,"mg-loader",{message:[1],messageHide:[4,"message-hide"]},void 0,{message:[{watchMessage:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-loader","mg-icon"].forEach((t=>{switch(t){case"mg-loader":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||r()}}))}c();export{m as M,c as d}

package/dist/components/mg-menu-item2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as n,h as a,Host as o}from"@stencil/core/internal/client";import{c as m,C as s,i as r,a as c,t as l,n as h}from"./index2.js";import{n as g}from"./index3.js";import{i as d}from"./index4.js";import{d as u}from"./mg-badge2.js";import{d as v}from"./mg-button2.js";import{d as b}from"./mg-card2.js";import{d as p}from"./mg-icon2.js";import{d as _}from"./mg-popover2.js";import{d as f}from"./mg-popover-content2.js";const z={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},w=["_blank","_self","_parent","_top"],x={VERTICAL:"vertical",HORIZONTAL:"horizontal"},y=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.itemLoaded=n(this,"item-loaded",7),this.itemUpdated=n(this,"item-updated",7),this.name="mg-menu-item",this.classNavigationButton="mg-c-menu-item__navigation-button",this.identifier=m("mg-menu-item"),this.status="visible",this.isIcon=!1,this.expanded=!1,this.classNavigationButtonClassList=new s([this.classNavigationButton]),this.hasChildren=!1,this.getParentMenu=()=>this.element.closest("mg-menu"),this.hasStatus=(t,i)=>t.status===i,this.hasPopover=()=>this.isDirection(x.HORIZONTAL)&&(this.isInMainMenu()&&Array.from(this.element.children).some((t=>null===t.querySelector("[slot]")))||this.isItemMore)&&void 0===this.href,this.hasActiveChild=()=>{var t;return Array.from((null===(t=this.element.querySelector("mg-menu"))||void 0===t?void 0:t.children)||[]).some((t=>"MG-MENU-ITEM"===t.nodeName&&this.hasStatus(t,z.ACTIVE)&&!t.hasAttribute("hidden")))},this.isInteractiveItem=()=>this.hasChildren||!r(this.href),this.isDirection=(t,i=this.direction)=>t===i,this.isInMainMenu=()=>null!==this.getParentMenu()&&null===this.element.parentElement.closest("mg-menu-item"),this.updateDisplayNotificationBadge=()=>{const t=this.element.querySelector("mg-menu");this.displayNotificationBadge=null!==t&&Array.from(t.children).some((t=>null!==t.querySelector("mg-badge")&&!t.hasAttribute("hidden")))},this.updateExpanded=t=>{this.isInteractiveItem()&&(this.expanded=this.isDirection(x.VERTICAL)&&this.hasActiveChild()||t)},this.updateStatus=(t=[])=>{[z.HIDDEN,z.DISABLED,...t].includes(this.status)||(this.status=this.hasActiveChild()?z.ACTIVE:z.VISIBLE)},this.updateSlot=(t=!1)=>{if(void 0===Array.from(this.element.children).find((t=>"label"===t.getAttribute("slot"))))throw new Error(`<${this.name}> slot "label" is required.`);["label","metadata"].forEach((i=>{Array.from(this.element.querySelectorAll(`[slot="${i}"]`)).forEach((e=>{if(!r(e.textContent))throw new Error(`<${this.name}> slot "${i}" must have text content.`);(t&&!e.hasAttribute("title")||!t)&&e.setAttribute("title",e.textContent)}))}))},this.updateItem=t=>{this.updateExpanded(this.expanded),this.updateStatus(t),this.updatePopoverGuard(),this.updateDisplayNotificationBadge()},this.handleElementCLick=t=>{if(this.status===z.DISABLED&&(t.preventDefault(),t.stopPropagation()),this.updateExpanded(!this.expanded),!this.isInteractiveItem()){const t=i=>{null!==i&&t(i.parentElement.closest("mg-menu-item"))};t(this.element)}},this.handlePopoverDisplay=t=>{this.updateExpanded(t.detail)},this.renderSlot=()=>a("slot",null)}watchIdentifier(t){c(t)?this.popoverIdentifier=`${this.identifier}-popover`:console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${l(t)}.`)}watchTarget(t){if(t&&!w.includes(t))throw new Error(`<mg-link> prop "target" must be one of: ${w.join(", ")}. Passed value: ${l(t)}.`)}watchStatus(t,i){void 0!==i&&this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${i}`),this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${t}`)}watchIsIcon(t){const i=`${this.classNavigationButton}--is-icon`;t?"vertical"===this.direction?this.isIcon=!1:this.classNavigationButtonClassList.add(i):this.classNavigationButtonClassList.delete(i)}watchExpanded(t){if("boolean"!=typeof t)throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${l(t)}.`);this.updateExpanded(t),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((i=>{i!==this.element&&(i.expanded=!!t&&this.hasStatus(i,z.ACTIVE))}))}validateDirection(t,i){void 0!==i&&this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${i}`),this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${t}`),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((i=>{this.isDirection(x.VERTICAL,t)?i.dataset.level=`${(Number(i.dataset.level)||1)+1}`:delete i.dataset.level}))}validateHasChildren(t){if(t&&void 0!==this.element.href)throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`)}watchDataStyleDirection(t){this.direction=t,this.watchIsIcon(this.isIcon)}watchDataHasFocus(t){r(t)||this.updateExpanded(Boolean(t))}updatePopoverGuard(){const t=this.element.querySelector("*:not([slot])");null!==t&&(this.hasPopover()?t.dataset.mgPopoverGuard=this.popoverIdentifier:delete t.dataset.mgPopoverGuard)}componentWillLoad(){g(this),this.hasChildren=Array.from(this.element.children).some((t=>!["image","information","label","metadata"].includes(t.getAttribute("slot")))),this.messages=d(this.element).messages.menuItem,this.isItemMore=void 0!==this.element.dataset.overflowMore,this.watchStatus(this.status),this.watchExpanded(this.expanded),this.watchTarget(this.target),this.watchIdentifier(this.identifier),this.watchIsIcon(this.isIcon)}componentDidLoad(){return this.updateSlot(!0),setTimeout((()=>{this.watchDataStyleDirection(this.element.dataset.styleDirection),this.updateItem([z.ACTIVE]),this.itemLoaded.emit(),new MutationObserver((t=>{t.some((t=>["hidden","status"].includes(t.attributeName)))&&this.updateStatus(this.hasChildren?void 0:[z.ACTIVE]),t.some((t=>"characterData"===t.type))&&this.updateSlot(),t.some((t=>"childList"===t.type))&&this.updateItem(),this.itemUpdated.emit()})).observe(this.element,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}),0)}componentShouldUpdate(){return h((()=>{this.itemUpdated.emit()}))}renderInformationSlotOrNotification(){return this.displayNotificationBadge?a("span",{class:`${this.classNavigationButton}-text-content-notification`},a("mg-badge",{label:this.messages.badgeLabel,value:"!",variant:"text-color",slot:"information"})):a("slot",{name:"information"})}renderInteractiveElement(){return a(void 0!==this.href?"a":"button",{href:this.href,class:this.classNavigationButtonClassList.join(),tabindex:[z.DISABLED,z.HIDDEN].includes(this.status)?-1:void 0,disabled:this.status===z.DISABLED,hidden:this.status===z.HIDDEN,target:void 0!==this.href&&void 0!==this.target?this.target:void 0,"aria-expanded":this.hasChildren&&this.expanded.toString(),"aria-current":this.status===z.ACTIVE&&"page",onClick:this.handleElementCLick},a("slot",{name:"image"}),a("div",{class:{[`${this.classNavigationButton}-center`]:!0,"mg-u-visually-hidden":this.isIcon}},a("div",{class:`${this.classNavigationButton}-text-content`},a("slot",{name:"label"}),!this.isIcon&&this.renderInformationSlotOrNotification(),"_blank"===this.target&&[a("mg-icon",{key:"icon-new-tab",class:`${this.classNavigationButton}-new-tab`,icon:"arrow-up-right-square"}),a("span",{key:"a11y-new-tab",class:"mg-u-visually-hidden"},this.messages.openNewTab)]),!this.isIcon&&a("slot",{name:"metadata"})),this.isIcon&&this.renderInformationSlotOrNotification(),this.hasChildren&&void 0===this.href&&!this.isIcon&&a("span",{class:{[`${this.classNavigationButton}-chevron`]:!0,[`${this.classNavigationButton}-chevron--rotate`]:!0===this.expanded}},a("mg-icon",{icon:"chevron-down",size:"small"})))}render(){const t=()=>({"mg-c-menu-item__collapse-container":!0,"mg-c-menu-item__collapse-container--first-level":(this.isInMainMenu()||this.isItemMore)&&this.isDirection(x.HORIZONTAL)});return a(o,{key:"c96763db4eeaa4a70213f39f13600aacbbed02b4",role:this.isItemMore?"presentation":"listitem"},this.hasPopover()?a("mg-popover",{display:this.expanded,placement:"bottom-start",arrowHide:!0,"onDisplay-change":this.handlePopoverDisplay,identifier:this.popoverIdentifier,"data-fallback-placement":"bottom-end"},this.renderInteractiveElement(),a("div",{class:t(),slot:"content"},this.renderSlot())):[this.renderInteractiveElement(),a("div",{key:"vertical-container",class:t(),hidden:!this.expanded},this.renderSlot())])}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],isIcon:[{watchIsIcon:0}],expanded:[{watchExpanded:0}],direction:[{validateDirection:0}],hasChildren:[{validateHasChildren:0}],"data-style-direction":[{watchDataStyleDirection:0}],"data-has-focus":[{watchDataHasFocus:0}]}}static get style(){return'.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}}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button{padding-left:calc(1*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="1"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level="2"]) .mg-c-menu-item__navigation-button{padding-left:calc(2*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="2"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level="3"]) .mg-c-menu-item__navigation-button{padding-left:calc(3*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="3"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level="4"]) .mg-c-menu-item__navigation-button{padding-left:calc(4*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="4"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level="5"]) .mg-c-menu-item__navigation-button{padding-left:calc(5*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="5"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level="6"]) .mg-c-menu-item__navigation-button{padding-left:calc(6*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-menu-item-button-spacing-vertical)*2 + var(--mg-c-menu-item-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal)) var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button::after{position:absolute;background-color:var(--mg-c-menu-item-color);content:""}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:hover,.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled)::before,.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-menu-item-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-menu-item-button-margin-horizontal);margin-left:var(--mg-c-menu-item-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-menu-item-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--horizontal::before{margin:var(--mg-c-menu-item-button-spacing-vertical) var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon{min-width:calc(var(--mg-c-menu-item-height) + var(--mg-c-menu-item-button-margin-horizontal)*2);justify-content:center;padding:.2rem;gap:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon::before{min-width:var(--mg-c-menu-item-height)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon .mg-c-menu-item__navigation-button-text-content-notification{margin-left:0}:host{position:relative;display:flex;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-menu-item-height:var(--mg-b-size-40)}:host mg-popover{--mg-c-popover-overflow:hidden}:host mg-popover-content[data-popper-placement^=bottom][data-arrow-hide]{margin-top:.2rem !important}:host([data-style-direction=vertical]){--mg-c-menu-item-height:var(--mg-b-size-24);--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-8);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-8);flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-style-direction=horizontal]){--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-12)}:host([data-style-direction=horizontal]) ::slotted(mg-menu),.mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=metadata]){color:var(--mg-b-color-neutral-90)}::slotted(*){display:flex;flex-direction:column}::slotted([slot=image]){width:auto !important;max-width:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important;height:auto !important;max-height:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}'}},[257,"mg-menu-item",{identifier:[513],href:[1],target:[1],status:[1537],isIcon:[1028,"is-icon"],expanded:[1028],classNavigationButtonClassList:[32],direction:[32],isItemMore:[32],hasChildren:[32],displayNotificationBadge:[32]},void 0,{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],isIcon:[{watchIsIcon:0}],expanded:[{watchExpanded:0}],direction:[{validateDirection:0}],hasChildren:[{validateHasChildren:0}],"data-style-direction":[{watchDataStyleDirection:0}],"data-has-focus":[{watchDataHasFocus:0}]}]);function $(){"undefined"!=typeof customElements&&["mg-menu-item","mg-badge","mg-button","mg-card","mg-icon","mg-popover","mg-popover-content"].forEach((i=>{switch(i){case"mg-menu-item":customElements.get(t(i))||customElements.define(t(i),y);break;case"mg-badge":customElements.get(t(i))||u();break;case"mg-button":customElements.get(t(i))||v();break;case"mg-card":customElements.get(t(i))||b();break;case"mg-icon":customElements.get(t(i))||p();break;case"mg-popover":customElements.get(t(i))||_();break;case"mg-popover-content":customElements.get(t(i))||f()}}))}$();export{y as M,z as S,x as a,$ as d}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as n,h as a,Host as o}from"@stencil/core/internal/client";import{c as m,C as s,i as r,a as c,t as l,n as h}from"./index2.js";import{n as g}from"./index3.js";import{i as d}from"./index4.js";import{d as u}from"./mg-badge2.js";import{d as v}from"./mg-button2.js";import{d as b}from"./mg-card2.js";import{d as p}from"./mg-icon2.js";import{d as _}from"./mg-popover2.js";import{d as f}from"./mg-popover-content2.js";const z={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},w=["_blank","_self","_parent","_top"],x={VERTICAL:"vertical",HORIZONTAL:"horizontal"},y=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.itemLoaded=n(this,"item-loaded",7),this.itemUpdated=n(this,"item-updated",7),this.name="mg-menu-item",this.classNavigationButton="mg-c-menu-item__navigation-button",this.identifier=m("mg-menu-item"),this.status="visible",this.isIcon=!1,this.expanded=!1,this.classNavigationButtonClassList=new s([this.classNavigationButton]),this.hasChildren=!1,this.getParentMenu=()=>this.element.closest("mg-menu"),this.hasStatus=(t,i)=>t.status===i,this.hasPopover=()=>this.isDirection(x.HORIZONTAL)&&(this.isInMainMenu()&&Array.from(this.element.children).some((t=>null===t.querySelector("[slot]")))||this.isItemMore)&&void 0===this.href,this.hasActiveChild=()=>{var t;return Array.from((null===(t=this.element.querySelector("mg-menu"))||void 0===t?void 0:t.children)||[]).some((t=>"MG-MENU-ITEM"===t.nodeName&&this.hasStatus(t,z.ACTIVE)&&!t.hasAttribute("hidden")))},this.isInteractiveItem=()=>this.hasChildren||!r(this.href),this.isDirection=(t,i=this.direction)=>t===i,this.isInMainMenu=()=>null!==this.getParentMenu()&&null===this.element.parentElement.closest("mg-menu-item"),this.updateDisplayNotificationBadge=()=>{const t=this.element.querySelector("mg-menu");this.displayNotificationBadge=null!==t&&Array.from(t.children).some((t=>null!==t.querySelector("mg-badge")&&!t.hasAttribute("hidden")))},this.updateExpanded=t=>{this.isInteractiveItem()&&(this.expanded=this.isDirection(x.VERTICAL)&&this.hasActiveChild()||t)},this.updateStatus=(t=[])=>{[z.HIDDEN,z.DISABLED,...t].includes(this.status)||(this.status=this.hasActiveChild()?z.ACTIVE:z.VISIBLE)},this.updateSlot=(t=!1)=>{if(void 0===Array.from(this.element.children).find((t=>"label"===t.getAttribute("slot"))))throw new Error(`<${this.name}> slot "label" is required.`);["label","metadata"].forEach((i=>{Array.from(this.element.querySelectorAll(`[slot="${i}"]`)).forEach((e=>{if(!r(e.textContent))throw new Error(`<${this.name}> slot "${i}" must have text content.`);(t&&!e.hasAttribute("title")||!t)&&e.setAttribute("title",e.textContent)}))}))},this.updateItem=t=>{this.updateExpanded(this.expanded),this.updateStatus(t),this.updatePopoverGuard(),this.updateDisplayNotificationBadge()},this.handleElementCLick=t=>{if(this.status===z.DISABLED&&(t.preventDefault(),t.stopPropagation()),this.updateExpanded(!this.expanded),!this.isInteractiveItem()){const t=i=>{null!==i&&t(i.parentElement.closest("mg-menu-item"))};t(this.element)}},this.handlePopoverDisplay=t=>{this.updateExpanded(t.detail)},this.renderSlot=()=>a("slot",null)}watchIdentifier(t){c(t)?this.popoverIdentifier=`${this.identifier}-popover`:console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${l(t)}.`)}watchTarget(t){if(t&&!w.includes(t))throw new Error(`<mg-link> prop "target" must be one of: ${w.join(", ")}. Passed value: ${l(t)}.`)}watchStatus(t,i){void 0!==i&&this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${i}`),this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${t}`)}watchIsIcon(t){const i=`${this.classNavigationButton}--is-icon`;t?"vertical"===this.direction?this.isIcon=!1:this.classNavigationButtonClassList.add(i):this.classNavigationButtonClassList.delete(i)}watchExpanded(t){if("boolean"!=typeof t)throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${l(t)}.`);this.updateExpanded(t),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((i=>{i!==this.element&&(i.expanded=!!t&&this.hasStatus(i,z.ACTIVE))}))}validateDirection(t,i){void 0!==i&&this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${i}`),this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${t}`),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((i=>{this.isDirection(x.VERTICAL,t)?i.dataset.level=`${(Number(i.dataset.level)||1)+1}`:delete i.dataset.level}))}validateHasChildren(t){if(t&&void 0!==this.element.href)throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`)}watchDataStyleDirection(t){this.direction=t,this.watchIsIcon(this.isIcon)}watchDataHasFocus(t){r(t)||this.updateExpanded(Boolean(t))}updatePopoverGuard(){const t=this.element.querySelector("*:not([slot])");null!==t&&(this.hasPopover()?t.dataset.mgPopoverGuard=this.popoverIdentifier:delete t.dataset.mgPopoverGuard)}componentWillLoad(){g(this),this.hasChildren=Array.from(this.element.children).some((t=>!["image","information","label","metadata"].includes(t.getAttribute("slot")))),this.messages=d(this.element).messages.menuItem,this.isItemMore=void 0!==this.element.dataset.overflowMore,this.watchStatus(this.status),this.watchExpanded(this.expanded),this.watchTarget(this.target),this.watchIdentifier(this.identifier),this.watchIsIcon(this.isIcon)}componentDidLoad(){return this.updateSlot(!0),setTimeout((()=>{this.watchDataStyleDirection(this.element.dataset.styleDirection),this.updateItem([z.ACTIVE]),this.itemLoaded.emit(),new MutationObserver((t=>{t.some((t=>["hidden","status"].includes(t.attributeName)))&&this.updateStatus(this.hasChildren?void 0:[z.ACTIVE]),t.some((t=>"characterData"===t.type))&&this.updateSlot(),t.some((t=>"childList"===t.type))&&this.updateItem(),this.itemUpdated.emit()})).observe(this.element,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}),0)}componentShouldUpdate(){return h((()=>{this.itemUpdated.emit()}))}renderInformationSlotOrNotification(){return this.displayNotificationBadge?a("span",{class:`${this.classNavigationButton}-text-content-notification`},a("mg-badge",{label:this.messages.badgeLabel,value:"!",variant:"text-color",slot:"information"})):a("slot",{name:"information"})}renderInteractiveElement(){return a(void 0!==this.href?"a":"button",{href:this.href,class:this.classNavigationButtonClassList.join(),tabindex:[z.DISABLED,z.HIDDEN].includes(this.status)?-1:void 0,disabled:this.status===z.DISABLED,hidden:this.status===z.HIDDEN,target:void 0!==this.href&&void 0!==this.target?this.target:void 0,"aria-expanded":this.hasChildren&&this.expanded.toString(),"aria-current":this.status===z.ACTIVE&&"page",onClick:this.handleElementCLick},a("slot",{name:"image"}),a("div",{class:{[`${this.classNavigationButton}-center`]:!0,"mg-u-visually-hidden":this.isIcon}},a("div",{class:`${this.classNavigationButton}-text-content`},a("slot",{name:"label"}),!this.isIcon&&this.renderInformationSlotOrNotification(),"_blank"===this.target&&[a("mg-icon",{key:"icon-new-tab",class:`${this.classNavigationButton}-new-tab`,icon:"arrow-up-right-square"}),a("span",{key:"a11y-new-tab",class:"mg-u-visually-hidden"},this.messages.openNewTab)]),!this.isIcon&&a("slot",{name:"metadata"})),this.isIcon&&this.renderInformationSlotOrNotification(),this.hasChildren&&void 0===this.href&&!this.isIcon&&a("span",{class:{[`${this.classNavigationButton}-chevron`]:!0,[`${this.classNavigationButton}-chevron--rotate`]:!0===this.expanded}},a("mg-icon",{icon:"chevron-down",size:"small"})))}render(){const t=()=>({"mg-c-menu-item__collapse-container":!0,"mg-c-menu-item__collapse-container--first-level":(this.isInMainMenu()||this.isItemMore)&&this.isDirection(x.HORIZONTAL)});return a(o,{key:"68705299d83c64af9e915a6e4d471e78ed6d92ab",role:this.isItemMore?"presentation":"listitem"},this.hasPopover()?a("mg-popover",{display:this.expanded,placement:"bottom-start","onDisplay-change":this.handlePopoverDisplay,identifier:this.popoverIdentifier,"data-fallback-placement":"bottom-end"},this.renderInteractiveElement(),a("div",{class:t(),slot:"content"},this.renderSlot())):[this.renderInteractiveElement(),a("div",{key:"vertical-container",class:t(),hidden:!this.expanded},this.renderSlot())])}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],isIcon:[{watchIsIcon:0}],expanded:[{watchExpanded:0}],direction:[{validateDirection:0}],hasChildren:[{validateHasChildren:0}],"data-style-direction":[{watchDataStyleDirection:0}],"data-has-focus":[{watchDataHasFocus:0}]}}static get style(){return'.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}}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button{padding-left:calc(1*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="1"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level="2"]) .mg-c-menu-item__navigation-button{padding-left:calc(2*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="2"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level="3"]) .mg-c-menu-item__navigation-button{padding-left:calc(3*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="3"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level="4"]) .mg-c-menu-item__navigation-button{padding-left:calc(4*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="4"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level="5"]) .mg-c-menu-item__navigation-button{padding-left:calc(5*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="5"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level="6"]) .mg-c-menu-item__navigation-button{padding-left:calc(6*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-menu-item-button-spacing-vertical)*2 + var(--mg-c-menu-item-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal)) var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button::after{position:absolute;background-color:var(--mg-c-menu-item-color);content:""}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:hover,.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled)::before,.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-menu-item-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-menu-item-button-margin-horizontal);margin-left:var(--mg-c-menu-item-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-menu-item-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--horizontal::before{margin:var(--mg-c-menu-item-button-spacing-vertical) var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon{min-width:calc(var(--mg-c-menu-item-height) + var(--mg-c-menu-item-button-margin-horizontal)*2);justify-content:center;padding:var(--mg-b-size-2);gap:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon::before{min-width:var(--mg-c-menu-item-height)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon .mg-c-menu-item__navigation-button-text-content-notification{margin-left:0}:host{position:relative;display:flex;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-menu-item-height:var(--mg-b-size-40)}:host mg-popover{--mg-c-popover-overflow:hidden}:host mg-popover-content[data-popper-placement^=bottom][data-arrow-hide]{margin-top:var(--mg-b-size-2) !important}:host([data-style-direction=vertical]){--mg-c-menu-item-height:var(--mg-b-size-24);--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-8);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-8);flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-style-direction=horizontal]){--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-12)}:host([data-style-direction=horizontal]) ::slotted(mg-menu),.mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=metadata]){color:var(--mg-b-color-neutral-90)}::slotted(*){display:flex;flex-direction:column}::slotted([slot=image]){width:auto !important;max-width:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important;height:auto !important;max-height:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}'}},[257,"mg-menu-item",{identifier:[513],href:[1],target:[1],status:[1537],isIcon:[1028,"is-icon"],expanded:[1028],classNavigationButtonClassList:[32],direction:[32],isItemMore:[32],hasChildren:[32],displayNotificationBadge:[32]},void 0,{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],isIcon:[{watchIsIcon:0}],expanded:[{watchExpanded:0}],direction:[{validateDirection:0}],hasChildren:[{validateHasChildren:0}],"data-style-direction":[{watchDataStyleDirection:0}],"data-has-focus":[{watchDataHasFocus:0}]}]);function $(){"undefined"!=typeof customElements&&["mg-menu-item","mg-badge","mg-button","mg-card","mg-icon","mg-popover","mg-popover-content"].forEach((i=>{switch(i){case"mg-menu-item":customElements.get(t(i))||customElements.define(t(i),y);break;case"mg-badge":customElements.get(t(i))||u();break;case"mg-button":customElements.get(t(i))||v();break;case"mg-card":customElements.get(t(i))||b();break;case"mg-icon":customElements.get(t(i))||p();break;case"mg-popover":customElements.get(t(i))||_();break;case"mg-popover-content":customElements.get(t(i))||f()}}))}$();export{y as M,z as S,x as a,$ as d}

package/dist/components/mg-message2.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as s,HTMLElement as a,h as c}from"@stencil/core/internal/client";import{C as g,t as r}from"./index2.js";import{d as m}from"./mg-card2.js";import{d as t}from"./mg-icon2.js";const i=["info","warning","success","danger"],o=["bar-left","background"],n=s(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.classBase="mg-c-message",this.classFullWidth="mg-c-message--full-width",this.variant="info",this.variantStyle="bar-left",this.fullWidth=!1,this.classCollection=new g(["mg-c-message"]),this.hasActions=!1,this.getIcon=()=>{switch(this.variant){case"info":return"info-circle";case"warning":return"exclamation-triangle";case"success":return"check-circle";case"danger":return"exclamation-circle"}}}watchVariant(e,s){if(!i.includes(e))throw new Error(`<mg-message> prop "variant" must be one of: ${i.join(", ")}. Passed value: ${r(e)}.`);void 0!==e&&this.classCollection.add(`${this.classBase}--${e}`),void 0!==s&&this.classCollection.delete(`${this.classBase}--${s}`)}watchVariantStyle(e,s){if(!o.includes(e))throw new Error(`<mg-message> prop "variantStyle" must be one of: ${o.join(", ")}. Passed value: ${r(e)}.`);void 0!==e&&this.classCollection.add(`${this.classBase}--${e}`),void 0!==s&&this.classCollection.delete(`${this.classBase}--${s}`)}watchFullWidth(e){e?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}componentWillLoad(){this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchFullWidth(this.fullWidth),this.hasActions=null!==this.element.querySelector('[slot="actions"]')}render(){return c("div",{key:"7a91fbc1a334d006013cdc8dd8ce6bce52947b90",class:this.classCollection.join()},c("mg-card",{key:"8cffef0275a4c8e10f13974577fedc7857a41b7b",shadow:"background"!==this.variantStyle},c("span",{key:"7dea80369d39b5662a2257f7990b847115e7547f",class:"mg-c-message__icon"},c("mg-icon",{key:"843d6ba95d234f7e0e7986fc904058bd8e7dca95",icon:this.getIcon()})),c("div",{key:"903125d7b30bbc386bd9f5c690b38cd3df67a661",class:"mg-c-message__content"},c("span",{key:"3efffe2f4ebe5db86a4d42f156517caf4888e0c9",class:"mg-c-message__content-slot"},c("slot",{key:"f4dc15ab614ab7eb7a6d4c5ad11baba8037f6f18"})),this.hasActions&&[c("span",{class:"mg-c-message__content-separator",key:"content-separator"}),c("span",{class:"mg-c-message__content-actions-slot",key:"content-actions-slot"},c("slot",{key:"4b3861414a1ca22792bb77d0d7bf38280d812aa1",name:"actions"}))])))}get element(){return this}static get watchers(){return{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],fullWidth:[{watchFullWidth:0}]}}static get style(){return":host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-block-size:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message.mg-c-message--background{--mg-c-card-border-radius:var(--mg-b-size-8)}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;inset-block-start:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);inset-inline-start:var(--mg-b-size-8);line-height:1}.mg-c-message.mg-c-message--bar-left .mg-c-message__icon{inset-inline-start:calc(var(--mg-b-size-4) + var(--mg-b-size-8))}.mg-c-message__content{display:flex;box-sizing:border-box;flex-wrap:wrap;padding-block:0;padding-inline:calc(var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8)) var(--mg-b-size-8);place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;block-size:0;inline-size:var(--mg-b-size-40)}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:end}.mg-c-message ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-message,.mg-c-message mg-message{max-inline-size:100%}.mg-c-message.mg-c-message--full-width{display:block;inline-size:100%}"}},[257,"mg-message",{variant:[1],variantStyle:[1,"variant-style"],fullWidth:[4,"full-width"],classCollection:[32],hasActions:[32]},void 0,{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],fullWidth:[{watchFullWidth:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-message","mg-card","mg-icon"].forEach((s=>{switch(s){case"mg-message":customElements.get(e(s))||customElements.define(e(s),n);break;case"mg-card":customElements.get(e(s))||m();break;case"mg-icon":customElements.get(e(s))||t()}}))}l();export{n as M,l as d}
+import{transformTag as e,proxyCustomElement as s,HTMLElement as a,h as c}from"@stencil/core/internal/client";import{C as g,t as r}from"./index2.js";import{d as m}from"./mg-card2.js";import{d as t}from"./mg-icon2.js";const i=["info","warning","success","danger"],o=["bar-left","background"],n=s(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.classBase="mg-c-message",this.classFullWidth="mg-c-message--full-width",this.variant="info",this.variantStyle="bar-left",this.fullWidth=!1,this.classCollection=new g(["mg-c-message"]),this.hasActions=!1,this.getIcon=()=>{switch(this.variant){case"info":return"info-circle";case"warning":return"exclamation-triangle";case"success":return"check-circle";case"danger":return"exclamation-circle"}}}watchVariant(e,s){if(!i.includes(e))throw new Error(`<mg-message> prop "variant" must be one of: ${i.join(", ")}. Passed value: ${r(e)}.`);void 0!==e&&this.classCollection.add(`${this.classBase}--${e}`),void 0!==s&&this.classCollection.delete(`${this.classBase}--${s}`)}watchVariantStyle(e,s){if(!o.includes(e))throw new Error(`<mg-message> prop "variantStyle" must be one of: ${o.join(", ")}. Passed value: ${r(e)}.`);void 0!==e&&this.classCollection.add(`${this.classBase}--${e}`),void 0!==s&&this.classCollection.delete(`${this.classBase}--${s}`)}watchFullWidth(e){e?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}componentWillLoad(){this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchFullWidth(this.fullWidth),this.hasActions=null!==this.element.querySelector('[slot="actions"]')}render(){return c("div",{key:"a182451917bfe33de32c893d9eeedd52b11f8b15",class:this.classCollection.join()},c("mg-card",{key:"9dd0da031d97f669e885a1681b72e5a086e79c0b",shadow:"background"!==this.variantStyle},c("span",{key:"158c2470a10ab9d677e2031c28ad0d43c09e4cf2",class:"mg-c-message__icon"},c("mg-icon",{key:"f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf",icon:this.getIcon()})),c("div",{key:"56a7299983c30ea4527bb19a46ac0677b6e8c40e",class:"mg-c-message__content"},c("span",{key:"744ad763177f92bdbac37d43a5a58f221ff97e69",class:"mg-c-message__content-slot"},c("slot",{key:"14b7f22e206bd074336287809574b2a5abfe5bf5"})),this.hasActions&&[c("span",{class:"mg-c-message__content-separator",key:"content-separator"}),c("span",{class:"mg-c-message__content-actions-slot",key:"content-actions-slot"},c("slot",{key:"104be326f73ded002cba9a471491ca614227e3d5",name:"actions"}))])))}get element(){return this}static get watchers(){return{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],fullWidth:[{watchFullWidth:0}]}}static get style(){return":host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-block-size:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message.mg-c-message--background{--mg-c-card-border-radius:var(--mg-b-size-8)}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;inset-block-start:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);inset-inline-start:var(--mg-b-size-8);line-height:1}.mg-c-message.mg-c-message--bar-left .mg-c-message__icon{inset-inline-start:calc(var(--mg-b-size-4) + var(--mg-b-size-8))}.mg-c-message__content{display:flex;box-sizing:border-box;flex-wrap:wrap;padding-block:0;padding-inline:calc(var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8)) var(--mg-b-size-8);place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;block-size:0;inline-size:var(--mg-b-size-40)}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:end}.mg-c-message ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-message,.mg-c-message mg-message{max-inline-size:100%}.mg-c-message.mg-c-message--full-width{display:block;inline-size:100%}"}},[257,"mg-message",{variant:[1],variantStyle:[1,"variant-style"],fullWidth:[4,"full-width"],classCollection:[32],hasActions:[32]},void 0,{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],fullWidth:[{watchFullWidth:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-message","mg-card","mg-icon"].forEach((s=>{switch(s){case"mg-message":customElements.get(e(s))||customElements.define(e(s),n);break;case"mg-card":customElements.get(e(s))||m();break;case"mg-icon":customElements.get(e(s))||t()}}))}l();export{n as M,l as d}