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

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

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

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

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

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

package/dist/components/mg-input2.js

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

package/dist/components/mg-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"./index4.js";import{i as n,t as o}from"./index2.js";import{d as r}from"./mg-icon2.js";const m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.messageHide=!1}watchMessage(e){if(e&&!n(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${o(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return s("div",{key:"a2e3880baccec9691a9fd6abbdb9e01d452136aa",class:"mg-c-loader","aria-live":"polite"},s("mg-icon",{key:"044153b87e799f1f51cb3c9c6236bf6b8b328cf5",icon:"loader",spin:!0}),s("span",{key:"5e4293bd33bd2a51b7557ebf26037991e4fc853e",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return this}static get watchers(){return{message:[{watchMessage:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}"}},[1,"mg-loader",{message:[1],messageHide:[4,"message-hide"]},void 0,{message:[{watchMessage:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-loader","mg-icon"].forEach((t=>{switch(t){case"mg-loader":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||r()}}))}c();export{m as M,c as d}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as a}from"./index4.js";import{i as n,t as o}from"./index2.js";import{d as r}from"./mg-icon2.js";const m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.messageHide=!1}watchMessage(e){if(e&&!n(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${o(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return s("div",{key:"55e8bc6908f1cd83f9ffc0e30dd28ede501e30d8",class:"mg-c-loader","aria-live":"polite"},s("mg-icon",{key:"4306e748a509ac3c546d565bf2bed74529ce3c24",icon:"loader",spin:!0}),s("span",{key:"6636df5f58654f6de7f0b79e8e4dd32e4fe2bfc7",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return this}static get watchers(){return{message:[{watchMessage:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}"}},[1,"mg-loader",{message:[1],messageHide:[4,"message-hide"]},void 0,{message:[{watchMessage:0}]}]);function d(){"undefined"!=typeof customElements&&["mg-loader","mg-icon"].forEach((t=>{switch(t){case"mg-loader":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||r()}}))}d();export{m as M,d}

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

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

package/dist/components/mg-message2.js

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

package/dist/components/mg-modal.js

@@ -1 +1 @@
-import{transformTag as a,proxyCustomElement as e,HTMLElement as t,createEvent as i,h as o}from"@stencil/core/internal/client";import{c as d,C as c,a as s,t as l,i as r}from"./index2.js";import{i as m}from"./index4.js";import{d as n}from"./mg-button2.js";import{d as g}from"./mg-card2.js";import{d as h}from"./mg-icon2.js";const b=["dialog","alertdialog"],f=e(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.componentShow=i(this,"component-show",7),this.componentHide=i(this,"component-hide",7),this.componentClose=i(this,"component-close",7),this.titleId="",this.identifier=d("mg-modal"),this.dialogRole="dialog",this.closeButton=!1,this.open=!1,this.hasActions=!1,this.classCollection=new c(["mg-c-modal"]),this.handleClose=()=>{this.open=!1,this.componentClose.emit()}}watchIdentifier(a){if(!s(a))throw Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${l(a)}.`)}validateDialogRole(a){if(!b.includes(a))throw Error(`<mg-modal> prop "dialogRole" must be one of: ${b.join(", ")}. Passed value: ${l(a)}.`)}validateModalTitle(a){if(!r(a))throw Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${l(a)}.`)}watchOpen(a){a?(this.dialog.showModal(),this.componentShow.emit(),document.body.style.overflow="hidden"):(this.dialog.close(),this.componentHide.emit(),document.body.style.overflow=this.bodyOverflow)}componentWillLoad(){this.bodyOverflow=document.body.style.overflow,this.messages=m(this.element).messages,this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.titleId=this.identifier+"-title",this.watchIdentifier(this.identifier),this.validateModalTitle(this.modalTitle),this.validateDialogRole(this.dialogRole)}componentDidLoad(){this.watchOpen(this.open),this.dialog.addEventListener("close",(()=>{this.open=!1,this.componentClose.emit()}))}render(){return o("dialog",{key:"3b802b99d96be80d8071c89be6537269866e6fff",role:this.dialogRole,id:this.identifier,class:this.classCollection.join(),"aria-labelledby":this.titleId,ref:a=>{null!==a&&(this.dialog=a)}},o("mg-card",{key:"4985b4af69968577ffd36a6a2b1f96274703d146",shadow:!0},o("div",{key:"c4aed6d29dc5ee00f323dcbaecff9532f370ec98",class:"mg-c-modal__dialog"},o("header",{key:"3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7",class:"mg-c-modal__header"},this.closeButton&&o("span",{key:"55205da6c8991444ff53da7224b28c7475b0e173",class:"mg-c-modal__close-button"},o("mg-button",{key:"da7fdea3a124a559cb637beea9d5565c1f777eea","is-icon":!0,variant:"flat",label:this.messages.modal.closeButton,onClick:this.handleClose},o("mg-icon",{key:"77c2ab2bcacdda9fa179b480651507a1d6584686",icon:"cross"}))),o("h1",{key:"cedb5efc709de2d18e81409139da790349a48bb8",class:"mg-c-modal__title",id:this.titleId},this.modalTitle)),o("article",{key:"7f24e65244836c08dbf7465f8c80970080003bcd",class:"mg-c-modal__content"},o("slot",{key:"36d7c2a0ef1bb1024887da08298391962285bbf8"})),this.hasActions&&o("footer",{key:"5967d650e4e58726641a3c960d82aa7ee588e38f",class:"mg-c-modal__footer"},o("slot",{key:"c275b8235acb658ded3db7c69b931000a5ff14d2",name:"actions"})))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],dialogRole:[{validateDialogRole:0}],modalTitle:[{validateModalTitle:0}],open:[{watchOpen:0}]}}static get style(){return":host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{max-height:100dvh;box-sizing:border-box;border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-dark);opacity:.65}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100dvh}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}"}},[257,"mg-modal",{identifier:[1],dialogRole:[1,"dialog-role"],modalTitle:[1,"modal-title"],closeButton:[4,"close-button"],open:[1028],hasActions:[32],classCollection:[32]},void 0,{identifier:[{watchIdentifier:0}],dialogRole:[{validateDialogRole:0}],modalTitle:[{validateModalTitle:0}],open:[{watchOpen:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-modal","mg-button","mg-card","mg-icon"].forEach((e=>{switch(e){case"mg-modal":customElements.get(a(e))||customElements.define(a(e),f);break;case"mg-button":customElements.get(a(e))||n();break;case"mg-card":customElements.get(a(e))||g();break;case"mg-icon":customElements.get(a(e))||h()}}))}u();const v=f,p=u;export{v as MgModal,p as defineCustomElement}
+import{transformTag as e,proxyCustomElement as a,HTMLElement as t,createEvent as i,h as o}from"@stencil/core/internal/client";import{c as d,C as c,a as s,t as l,i as r}from"./index2.js";import{i as m}from"./index4.js";import{d as n}from"./mg-button2.js";import{d as g}from"./mg-card2.js";import{d as h}from"./mg-icon2.js";const f=["dialog","alertdialog"],b=a(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.componentShow=i(this,"component-show",7),this.componentHide=i(this,"component-hide",7),this.componentClose=i(this,"component-close",7),this.titleId="",this.identifier=d("mg-modal"),this.dialogRole="dialog",this.closeButton=!1,this.open=!1,this.hasActions=!1,this.classCollection=new c(["mg-c-modal"]),this.handleClose=()=>{this.open=!1,this.componentClose.emit()}}watchIdentifier(e){if(!s(e))throw Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${l(e)}.`)}validateDialogRole(e){if(!f.includes(e))throw Error(`<mg-modal> prop "dialogRole" must be one of: ${f.join(", ")}. Passed value: ${l(e)}.`)}validateModalTitle(e){if(!r(e))throw Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${l(e)}.`)}watchOpen(e){e?(this.dialog.showModal(),this.componentShow.emit(),document.body.style.overflow="hidden"):(this.dialog.close(),this.componentHide.emit(),document.body.style.overflow=this.bodyOverflow)}componentWillLoad(){this.bodyOverflow=document.body.style.overflow,this.messages=m(this.element).messages,this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.titleId=this.identifier+"-title",this.watchIdentifier(this.identifier),this.validateModalTitle(this.modalTitle),this.validateDialogRole(this.dialogRole)}componentDidLoad(){this.watchOpen(this.open),this.dialog.addEventListener("close",(()=>{this.open=!1,this.componentClose.emit()}))}render(){return o("dialog",{key:"30175543565cfaad83c561b8316ee7af057d6439",role:this.dialogRole,id:this.identifier,class:this.classCollection.join(),"aria-labelledby":this.titleId,ref:e=>{null!==e&&(this.dialog=e)}},o("mg-card",{key:"b1ddb9603f4956c171fd4e0f5193236b7fc5a739",shadow:!0},o("div",{key:"9d6e8f1d4e19088a31f6785176cee3c099dce111",class:"mg-c-modal__dialog"},o("header",{key:"f2e85f730ff4a4dd94df7640d1bb6e3b89c94fbf",class:"mg-c-modal__header"},this.closeButton&&o("span",{key:"ab1c36f6bbbeed4ba54342a1cae4b08bc3befbb7",class:"mg-c-modal__close-button"},o("mg-button",{key:"7d3658b31d901dd6b95610e7cbb1d28a47f178f3","is-icon":!0,variant:"flat",label:this.messages.modal.closeButton,onClick:this.handleClose},o("mg-icon",{key:"662f7ee9badfe12dff1c2df58572c8829bf32bff",icon:"cross"}))),o("h1",{key:"8e2ec325dacc29c31806c9525dc4e56ce7f1232b",class:"mg-c-modal__title",id:this.titleId},this.modalTitle)),o("article",{key:"5bc09995ddda790ec1015737176d24484b4b178c",class:"mg-c-modal__content"},o("slot",{key:"c3ff57659beb9e0d523ed0a20ad9768c549f6332"})),this.hasActions&&o("footer",{key:"30336eb46581adbc144a9f8275489e5f9a1b9bcd",class:"mg-c-modal__footer"},o("slot",{key:"fc2cc4e0b3c300801d1cf928a8d1ef825c8775bc",name:"actions"})))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],dialogRole:[{validateDialogRole:0}],modalTitle:[{validateModalTitle:0}],open:[{watchOpen:0}]}}static get style(){return":host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{max-height:100dvh;box-sizing:border-box;border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-dark);opacity:.65}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100dvh}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-16)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto;scroll-padding-block:var(--mg-b-size-16)}.mg-c-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mg-b-size-8)}.mg-c-modal ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}"}},[257,"mg-modal",{identifier:[1],dialogRole:[1,"dialog-role"],modalTitle:[1,"modal-title"],closeButton:[4,"close-button"],open:[1028],hasActions:[32],classCollection:[32]},void 0,{identifier:[{watchIdentifier:0}],dialogRole:[{validateDialogRole:0}],modalTitle:[{validateModalTitle:0}],open:[{watchOpen:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-modal","mg-button","mg-card","mg-icon"].forEach((a=>{switch(a){case"mg-modal":customElements.get(e(a))||customElements.define(e(a),b);break;case"mg-button":customElements.get(e(a))||n();break;case"mg-card":customElements.get(e(a))||g();break;case"mg-icon":customElements.get(e(a))||h()}}))}u();const p=b,v=u;export{p as MgModal,v as defineCustomElement}