@mgdis/mg-components 6.21.0 → 6.22.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 a,t as r,i as h}from"./index2.js";import{c as l,b as p,w as c}from"./mg-input.conf.js";import{i as m}from"./index3.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as g}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const f=t=>"object"==typeof t&&"string"==typeof t.title,w=t=>Array.isArray(t)&&t.every((t=>f(t))),y=(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},_=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)):w(this.items)?null===(t=this.items.find((t=>t.value===this.value)))||void 0===t?void 0:t.title:null},this.handleInput=()=>{""===this.input.value?this.value=null:a(this.items)&&this.items.includes(this.input.value)?this.value=this.input.value:w(this.items)&&"string"==typeof this.input.value&&this.items.some(this.isInputValue)?this.value=this.items.find(this.isInputValue).value:(this.options.push({title:this.input.value,value:this.input.value,disabled:!0}),this.value=this.input.value),this.hasDisplayedError&&this.setErrorMessage()},this.isInputValue=t=>{var i;return t.title===(null===(i=this.input)||void 0===i?void 0:i.value)},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.isDisabledValue=()=>{var t;return w(this.options)&&!0===(null===(t=this.options.find(this.isInputValue))||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=>n("option",{key:t.title,value:t.title,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))"string"==typeof this.value&&(this.valueExist=t.includes(this.value)),this.options=t.map((t=>({title:t,value:t})));else{if(!w(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)}.`);this.valueExist=t.map((t=>t.value)).includes(this.value),this.options=t.some((t=>Boolean(t.group)))?t.reduce(y,[]):t}}watchReadonly(t){t?this.classCollection.add(l):this.classCollection.delete(l)}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(p):this.classCollection.delete(p)}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=m(this.element).messages,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();return n("mg-input",{key:"e7857da9c724cb582217b944cb723308d7efedbe",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=>{return"object"==typeof(i=t)&&"string"==typeof i.group&&w(i.options)?n("optgroup",{label:t.group,key:t.group},t.options.map(this.renderOption)):f(t)&&this.renderOption(t);var 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 x(){"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),_);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||g();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}x();export{_ as M,x 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{c as l,b as p,w as m}from"./mg-input.conf.js";import{i as c}from"./index3.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as g}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const f=t=>"object"==typeof t&&"string"==typeof t.title,w=t=>Array.isArray(t)&&t.every((t=>f(t))),y=(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},_=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)):w(this.items)?null===(t=this.items.find((t=>t.value===this.value)))||void 0===t?void 0:t.title:null},this.handleInput=()=>{""===this.input.value?this.value=null:a(this.items)&&this.items.includes(this.input.value)?this.value=this.input.value:w(this.items)&&"string"==typeof this.input.value&&this.items.some(this.isInputValue)?this.value=this.items.find(this.isInputValue).value:(this.options.push({title:this.input.value,value:this.input.value,disabled:!0}),this.value=this.input.value),this.hasDisplayedError&&this.setErrorMessage()},this.isInputValue=t=>{var i;return t.title===(null===(i=this.input)||void 0===i?void 0:i.value)},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.isDisabledValue=()=>{var t;return w(this.options)&&!0===(null===(t=this.options.find(this.isInputValue))||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=>n("option",{key:t.title,value:t.title,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))"string"==typeof this.value&&(this.valueExist=t.includes(this.value)),this.options=t.map((t=>({title:t,value:t})));else{if(!w(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)}.`);this.valueExist=t.map((t=>t.value)).includes(this.value),this.options=t.some((t=>Boolean(t.group)))?t.reduce(y,[]):t}}watchReadonly(t){t?this.classCollection.add(l):this.classCollection.delete(l)}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(p):this.classCollection.delete(p)}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=c(this.element).messages,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();return n("mg-input",{key:"ad948f6ed1a8e749ab7b62a198814a40ef99e884",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=>{return"object"==typeof(i=t)&&"string"==typeof i.group&&w(i.options)?n("optgroup",{label:t.group,key:t.group},t.options.map(this.renderOption)):f(t)&&this.renderOption(t);var 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 x(){"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),_);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||g();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}x();export{_ as M,x 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{c as p,b as c,w as l,e as m}from"./mg-input.conf.js";import{i as g}from"./index3.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 w}from"./mg-tooltip-content2.js";const y=["email","emails","url"],_=["text","search","tel",...y],x=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,z=t=>o(t)||Array.isArray(t)&&t.every(x),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.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)&&(y.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=()=>z(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(x))?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(!_.includes(t))throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${_.join(", ")}. Passed value: ${t}.`)}validateIcon(t){void 0!==t?this.classCollection.add(this.classHasIcon):this.classCollection.delete(this.classHasIcon)}validateDatalistoptions(t){if(Boolean(t)&&!z(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(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){l.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(m):this.classCollection.add(m)}watchHelpText(t){!r(t)&&y.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=g(this.element).messages,this.characterLeftId=`${this.identifier}-character-left`,this.datalistId=`${this.identifier}-datalist`,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:"cefd22e81ad535ff0ffd99d274c5eb616110ddd6",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:x(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 T(){"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),E);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))||w()}}))}T();export{E as M,T 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{c,b as p,w as l,e as m}from"./mg-input.conf.js";import{i as g}from"./index3.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 w}from"./mg-tooltip-content2.js";const y=["email","emails","url"],_=["text","search","tel",...y],x=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,z=t=>o(t)||Array.isArray(t)&&t.every(x),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.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)&&(y.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=()=>z(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(x))?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(!_.includes(t))throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${_.join(", ")}. Passed value: ${t}.`)}validateIcon(t){void 0!==t?this.classCollection.add(this.classHasIcon):this.classCollection.delete(this.classHasIcon)}validateDatalistoptions(t){if(Boolean(t)&&!z(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(p):this.classCollection.delete(p)}watchMgWidth(t){l.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(m):this.classCollection.add(m)}watchHelpText(t){!r(t)&&y.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=g(this.element).messages,this.characterLeftId=`${this.identifier}-character-left`,this.datalistId=`${this.identifier}-datalist`,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:"aa227eef42e7cfcb1ad0c6c2664498674b5cdd47",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:x(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 T(){"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),E);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))||w()}}))}T();export{E as M,T 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{c,b as p,w as m,e as h}from"./mg-input.conf.js";import{i as l}from"./index3.js";import{d as g}from"./mg-character-left2.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as b}from"./mg-input-title2.js";import{d as f}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const _=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(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))}validateDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}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(h):this.classCollection.add(h)}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=l(this.element).messages,this.characterLeftId=this.identifier+"-character-left",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:"dc646a42eee0c10394666218521ebfc1ab79a789",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 w(){"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),_);break;case"mg-character-left":customElements.get(t(i))||g();break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||b();break;case"mg-tooltip":customElements.get(t(i))||f();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}w();const x=_,y=w;export{x as MgInputTextarea,y as defineCustomElement}
+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{c,b as p,w as m,e as h}from"./mg-input.conf.js";import{i as l}from"./index3.js";import{d as g}from"./mg-character-left2.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as b}from"./mg-input-title2.js";import{d as f}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const _=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(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))}validateDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}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(h):this.classCollection.add(h)}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=l(this.element).messages,this.characterLeftId=this.identifier+"-character-left",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:"68f259138df7207d7ba16a8f36f3b45e8fb143d0",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 w(){"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),_);break;case"mg-character-left":customElements.get(t(i))||g();break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||b();break;case"mg-tooltip":customElements.get(t(i))||f();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}w();const x=_,y=w;export{x as MgInputTextarea,y 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";const l=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(){this.validateIdentifier(this.identifier),this.validateIsLegend(this.isLegend)}render(){return s(this.readonly?"span":this.tagName,{key:"860f74509c87626d4af51641f0f48db99fa194b0",class:"mg-c-input-title",htmlFor:!this.isLegend&&this.identifier,id:this.isLegend?`${this.identifier}-title`:void 0},s("slot",{key:"5eb0ca4d7f4061c0cff01e2de3adb9c98c42955a"}),this.required&&!this.readonly&&s("span",{key:"0637de0d0dca9b7f87c9bb04fd44eadc6d0606cc",class:"mg-c-input-title__required"}," ",s("span",{key:"b5736467e3fd759eeabe9cf8ee6ed3cf73b8ebfc",class:"mg-u-is-asterisk"},"*")))}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 r(){"undefined"!=typeof customElements&&["mg-input-title"].forEach((t=>{"mg-input-title"===t&&(customElements.get(e(t))||customElements.define(e(t),l))}))}r();export{l as M,r 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 l}from"./index2.js";const d=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: ${l(e)}.`)}validateIsLegend(e){this.tagName=e?"legend":"label"}componentWillLoad(){this.validateIdentifier(this.identifier),this.validateIsLegend(this.isLegend)}render(){return s(this.readonly?"span":this.tagName,{key:"d61ed048e1b2bb124281eb4067894d9a35abf778",class:"mg-c-input-title",htmlFor:!this.isLegend&&this.identifier,id:this.isLegend?`${this.identifier}-title`:void 0},s("slot",{key:"3bad02b10f8e9bb536c5eba9bf85d4b4967a9d97"}),this.required&&!this.readonly&&s("span",{key:"f0fd90a79f4449a1a3b7ec76a3eeb96bcc2e4ee6",class:"mg-c-input-title__required"}," ",s("span",{key:"7ea29cfc494c5c5c2b65b62ea27caee5a41062ca",class:"mg-u-is-asterisk"},"*")))}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 r(){"undefined"!=typeof customElements&&["mg-input-title"].forEach((t=>{"mg-input-title"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))}r();export{d as M,r 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{c as l,b as m}from"./mg-input.conf.js";import{d as c}from"./mg-icon2.js";import{d as h}from"./mg-input2.js";import{d as u}from"./mg-input-title2.js";import{d as p}from"./mg-tooltip2.js";import{d}from"./mg-tooltip-content2.js";const b=t=>"object"==typeof t&&"string"==typeof t.title,f=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(b))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(l):this.classCollection.delete(l)}watchDisabled(t){t?this.classCollection.add(m):this.classCollection.delete(m)}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(){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:"75a58e79ddd78a6a5656b6a3ef497087fbbb0638",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 v(){"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),f);break;case"mg-icon":customElements.get(t(i))||c();break;case"mg-input":customElements.get(t(i))||h();break;case"mg-input-title":customElements.get(t(i))||u();break;case"mg-tooltip":customElements.get(t(i))||p();break;case"mg-tooltip-content":customElements.get(t(i))||d()}}))}v();const w=f,y=v;export{w as MgInputToggle,y 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 g,i as a}from"./index2.js";import{c as l,b as m}from"./mg-input.conf.js";import{d as c}from"./mg-icon2.js";import{d as h}from"./mg-input2.js";import{d as u}from"./mg-input-title2.js";import{d as p}from"./mg-tooltip2.js";import{d}from"./mg-tooltip-content2.js";const b=t=>"object"==typeof t&&"string"==typeof t.title,f=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(b))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(l):this.classCollection.delete(l)}watchDisabled(t){t?this.classCollection.add(m):this.classCollection.delete(m)}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(){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:"834a0b0713019490b91d799ac9688661f930de43",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 v(){"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),f);break;case"mg-icon":customElements.get(t(i))||c();break;case"mg-input":customElements.get(t(i))||h();break;case"mg-input-title":customElements.get(t(i))||u();break;case"mg-tooltip":customElements.get(t(i))||p();break;case"mg-tooltip-content":customElements.get(t(i))||d()}}))}v();const w=f,y=v;export{w as MgInputToggle,y 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{l as h,t as m,a as l,c as p,b as g,d as c}from"./mg-input.conf.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as _}from"./mg-tooltip-content2.js";const f=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&&h.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: ${h.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(l),this.isReadonly=this.element.classList.contains(p),this.isDisabled=this.element.classList.contains(g),this.isVerticalList=this.element.classList.contains(c)}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"),[["slot",this.slotLabel],["identifier",this.identifier],["readonly",this.isReadonly.toString()],["required",(this.required&&!this.isDisabled||!1).toString()],["is-legend",this.isFieldset.toString()]].forEach((([i,e])=>{t.setAttribute(i,e)})),h.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(){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:"fbab18280a709407c83f324127e8de6cbb05fe7c",class:this.element.classList.toString(),role:t?"group":void 0,"aria-labelledby":t?`${this.identifier}-title`:void 0},s("div",{key:"ac0924c244b9fa87d02e659a5710ee93d12a202f",class:{"mg-c-input__title":!0,"mg-u-visually-hidden":this.labelHide}},s("slot",{key:"c825af33ba0a6c209d02d6487422347f7d8acfed",name:this.slotLabel}),this.tooltip&&("label"===this.tooltipPosition||this.labelOnTop)&&!this.labelHide&&this.renderTooltip()),s("div",{key:"805e1eedfdea132f3ea4fd11da761810a3d7c939",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-font-size-8);margin-bottom:var(--mg-b-font-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 w(){"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),f);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input-title":customElements.get(t(i))||d();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||_()}}))}w();export{f as M,w 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{l as h,t as m,a as l,c as p,b as g,d as c}from"./mg-input.conf.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as _}from"./mg-tooltip-content2.js";const f=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&&h.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: ${h.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(l),this.isReadonly=this.element.classList.contains(p),this.isDisabled=this.element.classList.contains(g),this.isVerticalList=this.element.classList.contains(c)}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"),[["slot",this.slotLabel],["identifier",this.identifier],["readonly",this.isReadonly.toString()],["required",(this.required&&!this.isDisabled||!1).toString()],["is-legend",this.isFieldset.toString()]].forEach((([i,e])=>{t.setAttribute(i,e)})),h.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(){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:"a1db280d19eead30e7ae27eb6e395e58b35baa63",class:this.element.classList.toString(),role:t?"group":void 0,"aria-labelledby":t?`${this.identifier}-title`:void 0},s("div",{key:"282f5776a9269272507f3e00f5dce690c9a604f4",class:{"mg-c-input__title":!0,"mg-u-visually-hidden":this.labelHide}},s("slot",{key:"b122979a159912d9c34bb024021257f9f88e6ff4",name:this.slotLabel}),this.tooltip&&("label"===this.tooltipPosition||this.labelOnTop)&&!this.labelHide&&this.renderTooltip()),s("div",{key:"098d3a7329fa0b5f37534fdf2df89e0468dcbe2a",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-font-size-8);margin-bottom:var(--mg-b-font-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 w(){"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),f);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input-title":customElements.get(t(i))||d();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||_()}}))}w();export{f as M,w as d}

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

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,h as s,Host as o}from"@stencil/core/internal/client";import{t as m}from"./index2.js";import{d as r,a,s as n}from"./mg-menu-item2.js";import{i as l}from"./index3.js";import{d as c}from"./mg-badge2.js";import{d}from"./mg-button2.js";import{d as h}from"./mg-card2.js";import{d as u}from"./mg-icon2.js";import{d as p}from"./mg-popover2.js";import{d as g}from"./mg-popover-content2.js";class b{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 s=Array.from(this.parentElement.children);this._resizeObserver=new ResizeObserver((t=>{this._availableWidth=t.map((t=>t.contentRect.width)).sort(((t,e)=>t-e)).shift(),s.forEach((t=>this.toggleItem(t,!1)));let e=0;s.forEach(((t,i)=>{e+=t.offsetWidth,i>0&&this.toggleItem(t,this.isOverflowElement(e,t))}))})),this._resizeObserver.observe(this.parentElement)}}const f=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-menu",this.direction="horizontal",this.size="medium",this.isChildMenu=()=>null!==this.element.closest("mg-menu-item"),this.getMenuItems=(t=this.element)=>{var e,i;const s=Array.from(t.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),o=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!=o&&s.push(o),s},this.updateMenuItems=()=>{this.getMenuItems().forEach((t=>{t.dataset.styleDirection=this.direction})),this.renderMgItemMore()},this.renderMgItemMore=()=>{var t;if(this.direction===a.VERTICAL||this.direction===a.HORIZONTAL&&this.isChildMenu()||this.element.children.length<=1)return;let e=this.element.querySelector("mg-item-more");null===e&&(e=document.createElement("mg-item-more"),this.element.appendChild(e));for(const t in this.itemmore)e[t]=this.itemmore[t];void 0===(null===(t=this.itemmore)||void 0===t?void 0:t.size)&&(e.size=this.size)}}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()}validateSize(t){if(!n.includes(t))throw new Error(`<${this.name}> prop "size" must be one of: ${n.join(", ")}. Passed value: ${m(t)}.`)}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),this.validateSize(this.size)}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 s(o,{key:"753833b01b86d6983f5d063f5598e2187b147a6e",role:"list","aria-label":this.label},s("slot",{key:"56702e49f5a97feddeb66e6271bd898061aa0d48"}))}get element(){return this}static get watchers(){return{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}],size:[{validateSize: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;overflow-y:auto}"}},[257,"mg-menu",{label:[1],direction:[513],itemmore:[16],size:[1]},[[0,"item-loaded","updateItemListener"]],{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}],size:[{validateSize:0}]}]);function v(){"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),f);break;case"mg-badge":customElements.get(t(e))||c();break;case"mg-button":customElements.get(t(e))||d();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||u();break;case"mg-item-more":customElements.get(t(e))||w();break;case"mg-menu":customElements.get(t(e))||v();break;case"mg-menu-item":customElements.get(t(e))||r();break;case"mg-popover":customElements.get(t(e))||p();break;case"mg-popover-content":customElements.get(t(e))||g()}}))}v();const E=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)}validateSize(t){if(t&&!n.includes(t))throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${m(t)}.`)}componentWillLoad(){this.messages=l(this.element).messages.itemMore,this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){return setTimeout((()=>{this.parentMenu=this.element.closest("mg-menu")}))}componentDidUpdate(){this.parentMenu&&void 0===this.overflowBehavior&&(this.overflowBehavior=new b(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 s(o,{key:"18219f5c906bb2c42dca842de120d41338a31872",role:"listitem","data-mg-popover-guard":`${t}-popover`},this.parentMenu&&s("mg-menu-item",{key:"2efd90d30cc2f51c9f5bff8512c765876730ca25","data-overflow-more":!0,"data-size":this.parentMenu.size,"data-style-direction":a.HORIZONTAL,identifier:t},s("mg-icon",{key:"6d4be9284b63935d298dfe8bf1ba50c70d9b140d",icon:this.icon.icon,size:this.size,slot:"image"}),s("span",{key:"52cd9091b29710fb66d2c421ae64bd31996d3395",class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),s("mg-menu",{key:"ea3152d9de22b209ed016e51e40c658dc6c58cd2",direction:a.VERTICAL,label:this.messages.menuLabel,size:this.size,ref:t=>{null!==t&&(this.itemMoreContainer=t)}})))}get element(){return this}static get watchers(){return{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}],size:[{validateSize: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],size:[1],parentMenu:[32]},void 0,{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}],size:[{validateSize:0}]}]);function w(){"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),E);break;case"mg-badge":customElements.get(t(e))||c();break;case"mg-button":customElements.get(t(e))||d();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||u();break;case"mg-item-more":customElements.get(t(e))||w();break;case"mg-menu":customElements.get(t(e))||v();break;case"mg-menu-item":customElements.get(t(e))||r();break;case"mg-popover":customElements.get(t(e))||p();break;case"mg-popover-content":customElements.get(t(e))||g()}}))}w();export{E as M,f as a,v as b,w 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 r,a}from"./mg-menu-item2.js";import{i as n}from"./index3.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:"17b5111014e866939f58170452ca74ee40c8454c",role:"list","aria-label":this.label},o("slot",{key:"7c2a9aafccbc7526c74acaf7a505d7a33befc5ad"}))}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}

package/dist/components/mg-loader2.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as a}from"./index3.js";import{i as r,t as n}from"./index2.js";import{d as o}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&&!r(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${n(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return s("div",{key:"ad7aa5e4fa0704cf2fa174ae1ed960f72deb79e3",class:"mg-c-loader","aria-live":"polite"},s("mg-icon",{key:"47e6df1e459a74851bf370e460438b7bdc2ed3d0",icon:"loader",spin:!0}),s("span",{key:"44d36e8492401cacb911f21fc707c1de03ae7a5d",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"./index3.js";import{i as r,t as n}from"./index2.js";import{d as o}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&&!r(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${n(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return s("div",{key:"da82988810c1e2916a2464299844cad674cd1f12",class:"mg-c-loader","aria-live":"polite"},s("mg-icon",{key:"45588ae8dd55ca582a4872d4c1e731bb00681c28",icon:"loader",spin:!0}),s("span",{key:"3bc07f4bbf8995de61c019942c33c8076793096a",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}

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

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as n,h as a,Host as m}from"@stencil/core/internal/client";import{c as o,C as s,i as g,a as c,t as l,n as u}from"./index2.js";import{i as r}from"./index3.js";import{d}from"./mg-badge2.js";import{d as v}from"./mg-button2.js";import{d as h}from"./mg-card2.js";import{d as _}from"./mg-icon2.js";import{d as b}from"./mg-popover2.js";import{d as p}from"./mg-popover-content2.js";const z={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},f=["_blank","_self","_parent","_top"],x={VERTICAL:"vertical",HORIZONTAL:"horizontal"},w=["medium","large","xlarge"],y=e(class extends i{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.navigationButton="mg-c-menu-item__navigation-button",this.identifier=o("mg-menu-item"),this.status="visible",this.expanded=!1,this.size="medium",this.navigationButtonClassList=new s([this.navigationButton]),this.hasChildren=!1,this.getParentMenu=()=>this.element.closest("mg-menu"),this.hasStatus=(t,e)=>t.status===e,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||!g(this.href),this.isDirection=(t,e=this.direction)=>t===e,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((e=>{Array.from(this.element.querySelectorAll(`[slot="${e}"]`)).forEach((i=>{if(!g(i.textContent))throw new Error(`<${this.name}> slot "${e}" must have text content.`);(t&&!i.hasAttribute("title")||!t)&&i.setAttribute("title",i.textContent)}))}))},this.updateItem=t=>{const e=this.getParentMenu();void 0===(null==e?void 0:e.size)||this.isItemMore?this.isItemMore&&(this.size=this.element.dataset.size):this.size=e.size,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=e=>{null!==e&&(e!==this.element&&e.expanded&&null!==e.shadowRoot.querySelector("mg-popover")?e.expanded=!1:t(e.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&&!f.includes(t))throw new Error(`<mg-link> prop "target" must be one of: ${f.join(", ")}. Passed value: ${l(t)}.`)}watchStatus(t,e){void 0!==e&&this.navigationButtonClassList.delete(`${this.navigationButton}--${e}`),this.navigationButtonClassList.add(`${this.navigationButton}--${t}`)}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((e=>{e!==this.element&&(e.expanded=!!t&&this.hasStatus(e,z.ACTIVE))}))}watchSize(t,e){void 0!==e&&this.navigationButtonClassList.delete(`${this.navigationButton}--size-${e}`),this.navigationButtonClassList.add(`${this.navigationButton}--size-${t}`)}validateDirection(t,e){void 0!==e&&this.navigationButtonClassList.delete(`${this.navigationButton}--${e}`),this.navigationButtonClassList.add(`${this.navigationButton}--${t}`),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((e=>{this.isDirection(x.VERTICAL,t)?e.dataset.level=`${(Number(e.dataset.level)||1)+1}`:delete e.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}watchDataHasFocus(t){g(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(){this.hasChildren=Array.from(this.element.children).some((t=>!["image","information","label","metadata"].includes(t.getAttribute("slot")))),this.messages=r(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.watchSize(this.size)}componentDidLoad(){return this.updateSlot(!0),setTimeout((()=>{this.watchDataStyleDirection(this.element.dataset.styleDirection),this.watchDataHasFocus(this.element.dataset.hasFocus),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 u((()=>{this.itemUpdated.emit()}))}renderInteractiveElement(){return a(void 0!==this.href?"a":"button",{href:this.href,class:this.navigationButtonClassList.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.navigationButton}-center`},a("div",{class:`${this.navigationButton}-text-content`},a("slot",{name:"label"}),!this.displayNotificationBadge&&a("slot",{name:"information"}),this.displayNotificationBadge&&a("span",{class:`${this.navigationButton}-text-content-notification`},a("mg-badge",{label:this.messages.badgeLabel,value:"!",variant:"text-color",slot:"information"})),"_blank"===this.target&&[a("mg-icon",{key:"icon-new-tab",class:`${this.navigationButton}-new-tab`,icon:"arrow-up-right-square"}),a("span",{key:"a11y-new-tab",class:"mg-u-visually-hidden"},this.messages.openNewTab)]),"medium"!==this.size&&a("slot",{name:"metadata"})),this.hasChildren&&void 0===this.href&&a("span",{class:{[`${this.navigationButton}-chevron`]:!0,[`${this.navigationButton}-chevron--rotate`]:!0===this.expanded}},a("mg-icon",{icon:"chevron-down"})))}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(m,{key:"9476243af2ac82d34f91487a22b46ea07c282ebc",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}],expanded:[{watchExpanded:0}],size:[{watchSize: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}}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:var(--mg-b-size-40);padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:var(--mg-b-size-48);padding:var(--mg-b-size-12) var(--mg-b-size-32)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{height:var(--mg-b-size-72);padding:var(--mg-b-size-12) var(--mg-b-size-40)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-40)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-menu-item-navigation-button-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:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.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),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-menu-item-color), transparent 90%)}.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{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-menu-item-color)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-menu-item-color)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*var(--mg-b-size-16))}: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.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*var(--mg-b-size-16))}: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.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*var(--mg-b-size-16))}: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.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*var(--mg-b-size-16))}: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.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*var(--mg-b-size-16))}: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.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*var(--mg-b-size-16))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*var(--mg-b-size-32))}: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.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*var(--mg-b-size-32))}: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.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*var(--mg-b-size-32))}: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.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*var(--mg-b-size-32))}: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.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*var(--mg-b-size-32))}: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.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*var(--mg-b-size-32))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(1*var(--mg-b-size-40))}: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.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(2*var(--mg-b-size-40))}: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.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(3*var(--mg-b-size-40))}: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.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(4*var(--mg-b-size-40))}: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.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(5*var(--mg-b-size-40))}: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.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(6*var(--mg-b-size-40))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}.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)}:host{position:relative;display:flex;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}: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-overflow-more]){--mg-c-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{--mg-c-menu-item-chevron-display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-c-menu-item-navigation-button-column-gap:var(--mg-b-size-8)}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:var(--mg-b-color-light)}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .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(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}'}},[257,"mg-menu-item",{identifier:[513],href:[1],target:[1],status:[1537],expanded:[1028],size:[32],navigationButtonClassList:[32],direction:[32],isItemMore:[32],hasChildren:[32],displayNotificationBadge:[32]},void 0,{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],expanded:[{watchExpanded:0}],size:[{watchSize: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((e=>{switch(e){case"mg-menu-item":customElements.get(t(e))||customElements.define(t(e),y);break;case"mg-badge":customElements.get(t(e))||d();break;case"mg-button":customElements.get(t(e))||v();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||_();break;case"mg-popover":customElements.get(t(e))||b();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}$();export{y as M,z as S,x as a,$ as d,w as s}
+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{i as g}from"./index3.js";import{d}from"./mg-badge2.js";import{d as u}from"./mg-button2.js";import{d as v}from"./mg-card2.js";import{d as b}from"./mg-icon2.js";import{d as p}from"./mg-popover2.js";import{d as _}from"./mg-popover-content2.js";const f={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},z=["_blank","_self","_parent","_top"],w={VERTICAL:"vertical",HORIZONTAL:"horizontal"},x=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(w.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,f.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(w.VERTICAL)&&this.hasActiveChild()||t)},this.updateStatus=(t=[])=>{[f.HIDDEN,f.DISABLED,...t].includes(this.status)||(this.status=this.hasActiveChild()?f.ACTIVE:f.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===f.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&&!z.includes(t))throw new Error(`<mg-link> prop "target" must be one of: ${z.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,f.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(w.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(){this.hasChildren=Array.from(this.element.children).some((t=>!["image","information","label","metadata"].includes(t.getAttribute("slot")))),this.messages=g(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([f.ACTIVE]),this.itemLoaded.emit(),new MutationObserver((t=>{t.some((t=>["hidden","status"].includes(t.attributeName)))&&this.updateStatus(this.hasChildren?void 0:[f.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:[f.DISABLED,f.HIDDEN].includes(this.status)?-1:void 0,disabled:this.status===f.DISABLED,hidden:this.status===f.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===f.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(w.HORIZONTAL)});return a(o,{key:"374bf5cb625380973d15163b1088e7e743da5dd4",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 y(){"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),x);break;case"mg-badge":customElements.get(t(i))||d();break;case"mg-button":customElements.get(t(i))||u();break;case"mg-card":customElements.get(t(i))||v();break;case"mg-icon":customElements.get(t(i))||b();break;case"mg-popover":customElements.get(t(i))||p();break;case"mg-popover-content":customElements.get(t(i))||_()}}))}y();export{x as M,f as S,w as a,y as d}