@mgdis/mg-components 6.22.0 → 6.22.1

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

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

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

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

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

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

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

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

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

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

package/dist/components/mg-loader2.js

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

package/dist/components/mg-message2.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as a,HTMLElement as s,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 o}from"./mg-icon2.js";const t=["info","warning","success","danger"],n=["bar-left","background"],i=a(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.classBase="mg-c-message",this.variant="info",this.variantStyle="bar-left",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,a){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!==a&&this.classCollection.delete(`${this.classBase}--${a}`)}watchVariantStyle(e,a){if(!n.includes(e))throw new Error(`<mg-message> prop "variantStyle" must be one of: ${n.join(", ")}. Passed value: ${r(e)}.`);void 0!==e&&this.classCollection.add(`${this.classBase}--${e}`),void 0!==a&&this.classCollection.delete(`${this.classBase}--${a}`)}componentWillLoad(){this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.hasActions=null!==this.element.querySelector('[slot="actions"]')}render(){return c("div",{key:"516691c613b30edf92d43fb9596169459dd8058a",class:this.classCollection.join()},c("mg-card",{key:"2be929dd6ed5458927b155d2f4c94fa15f9717e9",shadow:!0},"bar-left"===this.variantStyle&&c("span",{key:"604d5a7bd37abc571b40f8be09ac5dadbde69ec1",class:"mg-c-message__bar"}),c("span",{key:"837cce7c506997955de6efb4cffc53e5107fb602",class:"mg-c-message__icon"},c("mg-icon",{key:"3fd70f747cad5605f129bec491aa1bfd5ea42a95",icon:this.getIcon()})),c("div",{key:"bf0b166fee2c94014fc35980b06a45dfc91b8596",class:"mg-c-message__content"},c("span",{key:"305f79545b87055a954831c7355e7685340d1aa6",class:"mg-c-message__content-slot"},c("slot",{key:"d25113f6305d8ceaa39d12672fecc4e4bf6ffb49"})),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:"744098ecfdcc8bb5f5e0b913884126498c21d3f0",name:"actions"}))])))}get element(){return this}static get watchers(){return{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle: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-height: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__bar{background-color: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__bar{background-color: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__bar{background-color: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__bar{background-color: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 ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);left:calc(var(--mg-b-size-4) + var(--mg-b-size-8));line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 var(--mg-b-size-8) 0 calc(var(--mg-b-size-4) + var(--mg-b-size-8) + var(--mg-b-size-16) + 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;width:var(--mg-b-size-40);height:0}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:right}.mg-c-message__bar{position:absolute;top:0;left:0;width:var(--mg-b-size-4);height:100%}.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-width:100%}"}},[257,"mg-message",{variant:[1],variantStyle:[1,"variant-style"],classCollection:[32],hasActions:[32]},void 0,{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}]}]);function d(){"undefined"!=typeof customElements&&["mg-message","mg-card","mg-icon"].forEach((a=>{switch(a){case"mg-message":customElements.get(e(a))||customElements.define(e(a),i);break;case"mg-card":customElements.get(e(a))||m();break;case"mg-icon":customElements.get(e(a))||o()}}))}d();export{i as M,d}
+import{transformTag as e,proxyCustomElement as a,HTMLElement as s,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 o}from"./mg-icon2.js";const t=["info","warning","success","danger"],n=["bar-left","background"],i=a(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.classBase="mg-c-message",this.variant="info",this.variantStyle="bar-left",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,a){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!==a&&this.classCollection.delete(`${this.classBase}--${a}`)}watchVariantStyle(e,a){if(!n.includes(e))throw new Error(`<mg-message> prop "variantStyle" must be one of: ${n.join(", ")}. Passed value: ${r(e)}.`);void 0!==e&&this.classCollection.add(`${this.classBase}--${e}`),void 0!==a&&this.classCollection.delete(`${this.classBase}--${a}`)}componentWillLoad(){this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.hasActions=null!==this.element.querySelector('[slot="actions"]')}render(){return c("div",{key:"f99bf527eb2c6005eeaec11f89aaa08f8865ea57",class:this.classCollection.join()},c("mg-card",{key:"beede3cd97b022d947c216b6bba454a104ba5790",shadow:!0},"bar-left"===this.variantStyle&&c("span",{key:"515828d725a996c9d57b39ad75e9373150a1b78a",class:"mg-c-message__bar"}),c("span",{key:"02ae41c66af25c2611b9b6cb8c87a1ad99346fa3",class:"mg-c-message__icon"},c("mg-icon",{key:"3eadb40ed0dfa5ec51155608a67769c5fee3d402",icon:this.getIcon()})),c("div",{key:"b832251e8f330d00b512bcd508ae9bf6e5f511cb",class:"mg-c-message__content"},c("span",{key:"c3520fc49bd5c3c187a83823050ceb9ca8c12d46",class:"mg-c-message__content-slot"},c("slot",{key:"f4064dff9536cbb76e45c5c4c1a89621da9531b2"})),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:"5585f7c14c2c3896cfdb5319414cd82f4d4b3a8b",name:"actions"}))])))}get element(){return this}static get watchers(){return{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle: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-height: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__bar{background-color: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__bar{background-color: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__bar{background-color: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__bar{background-color: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 ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);left:calc(var(--mg-b-size-4) + var(--mg-b-size-8));line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 var(--mg-b-size-8) 0 calc(var(--mg-b-size-4) + var(--mg-b-size-8) + var(--mg-b-size-16) + 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;width:var(--mg-b-size-40);height:0}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:right}.mg-c-message__bar{position:absolute;top:0;left:0;width:var(--mg-b-size-4);height:100%}.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-width:100%}"}},[257,"mg-message",{variant:[1],variantStyle:[1,"variant-style"],classCollection:[32],hasActions:[32]},void 0,{variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}]}]);function d(){"undefined"!=typeof customElements&&["mg-message","mg-card","mg-icon"].forEach((a=>{switch(a){case"mg-message":customElements.get(e(a))||customElements.define(e(a),i);break;case"mg-card":customElements.get(e(a))||m();break;case"mg-icon":customElements.get(e(a))||o()}}))}d();export{i as M,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"./index3.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=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(!f.includes(a))throw Error(`<mg-modal> prop "dialogRole" must be one of: ${f.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:"fe7c7abaf53fbc5c87d2855cc72de2212dfe8642",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:"4b361ad45cd0b20253cf82e8f68c574429dd451c",shadow:!0},o("div",{key:"90f5490fb82f2900403f0a7549b338e884eea171",class:"mg-c-modal__dialog"},o("header",{key:"a58be90f41ad4448c387b1d18372aa31522d8d35",class:"mg-c-modal__header"},this.closeButton&&o("span",{key:"d9a0f9c1944b89b4a64f35fc9c1b70bea60f5423",class:"mg-c-modal__close-button"},o("mg-button",{key:"d7ecae6a2c2b2b094fea6b4a6d3c761f0f975b29","is-icon":!0,variant:"flat",label:this.messages.modal.closeButton,onClick:this.handleClose},o("mg-icon",{key:"54b91decfd0deb5e452e03c23f68bac58d97677a",icon:"cross"}))),o("h1",{key:"7dc2519bdf97ebc5cc18505fbbd347c7b1a4c336",class:"mg-c-modal__title",id:this.titleId},this.modalTitle)),o("article",{key:"b6a27c0bb6e5a350e10addbd0325b04626b07239",class:"mg-c-modal__content"},o("slot",{key:"41acebdafae6289d2f03fc3226eb7f3c4334e33f"})),this.hasActions&&o("footer",{key:"04a934a044bfbfa64f65642361e1962d2f599bf9",class:"mg-c-modal__footer"},o("slot",{key:"8d72488a4095c245b638d7d0e5fdbda77fa5ab01",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{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:100%}.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),b);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=b,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,C as d,a as s,t as l,i as r}from"./index2.js";import{i as m}from"./index3.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=c("mg-modal"),this.dialogRole="dialog",this.closeButton=!1,this.open=!1,this.hasActions=!1,this.classCollection=new d(["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:"2d99322fd3c80b8cbfea70589cf579e0c1c6f06b",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:"32692a6d41ef30b3d3e61ddcfea47350d374ed09",shadow:!0},o("div",{key:"c87bb43bb069671b65a9759ee293e77975707597",class:"mg-c-modal__dialog"},o("header",{key:"1272a946878efcf8c69f3b09852ba6938cbe31b0",class:"mg-c-modal__header"},this.closeButton&&o("span",{key:"0704656c7c5ac4c8d405f2cd673e91f72763ee8f",class:"mg-c-modal__close-button"},o("mg-button",{key:"4402971c763ee34145de5bd69d367fde68f9d1a2","is-icon":!0,variant:"flat",label:this.messages.modal.closeButton,onClick:this.handleClose},o("mg-icon",{key:"9e16add6a3e387971507a252671c895b6c94a586",icon:"cross"}))),o("h1",{key:"3e4fc2b4419398528565d382b728b8b752758ddd",class:"mg-c-modal__title",id:this.titleId},this.modalTitle)),o("article",{key:"170ff6bd9592687baa4c561615f540ad1c7400e4",class:"mg-c-modal__content"},o("slot",{key:"cb710e2a57e4c997deac367169b56047af1200b1"})),this.hasActions&&o("footer",{key:"1e08d67caeaaaf75eb97faa11528719ea537c24c",class:"mg-c-modal__footer"},o("slot",{key:"461ec8e4117477aef08dc6d346ad0bf6007ec12d",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{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:100%}.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((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 v=b,p=u;export{v as MgModal,p as defineCustomElement}

package/dist/components/mg-panel.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{c as n,C as l,a as o,t as r,i as c}from"./index2.js";import{i as d}from"./index3.js";import{d as h}from"./mg-button2.js";import{d as m}from"./mg-card2.js";import{d as g}from"./mg-character-left2.js";import{d as p}from"./mg-icon2.js";import{d as u}from"./mg-input2.js";import{d as f}from"./mg-input-text2.js";import{d as b}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as x}from"./mg-tooltip-content2.js";const _=["text","icon"],E=["left","right"],w=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.titleChange=a(this,"title-change",7),this.expandedChange=a(this,"expanded-change",7),this.identifier=n("mg-panel"),this.titleEditable=!1,this.titlePosition="left",this.expanded=!1,this.expandToggleDisplay="text",this.expandToggleDisabled=!1,this.shadow=!1,this.classCollection=new l(["mg-c-panel"]),this.isEditing=!1,this.hasPanelTitleSlot=()=>null!==this.element.querySelector('[slot="panel-title"]'),this.toggleIsEditing=()=>{this.isEditing=!this.isEditing},this.handleCollapseButton=()=>{this.expandToggleDisabled||(this.expanded=!this.expanded)},this.handleEditButton=()=>{this.toggleIsEditing()},this.handleUpdateTitle=t=>{this.updatedPanelTitle=t.detail},this.handleCancelEditButton=()=>{this.updatedPanelTitle=void 0,this.toggleIsEditing()},this.handleValidateEditButton=()=>{this.editInputElement.valid&&(void 0!==this.updatedPanelTitle&&(this.panelTitle=this.updatedPanelTitle),this.toggleIsEditing())},this.renderCollapseButton=()=>s("mg-button",{onClick:this.handleCollapseButton,variant:"flat","aria-expanded":""+this.expanded,"aria-controls":this.identifier+"-content",disabled:this.expandToggleDisabled,isIcon:"icon"===this.expandToggleDisplay,label:"icon"===this.expandToggleDisplay?this.panelTitle:void 0},s("span",{class:"mg-c-panel__collapse-button-content"},s("mg-icon",{icon:"chevron-up",class:{"mg-c-panel__collapse-button-icon":!0,"mg-c-panel__collapse-button-icon--reverse":!this.expanded}}),!this.isEditing&&"icon"!==this.expandToggleDisplay&&(this.hasPanelTitleSlot()?s("slot",{name:"panel-title"}):this.panelTitle))),this.renderEditButton=()=>s("mg-button",{key:"edit-button","is-icon":!0,variant:"flat",label:this.messages.panel.editLabel,onClick:this.handleEditButton},s("mg-icon",{icon:"pen"})),this.renderEditInput=()=>s("mg-input-text",{key:"edition-input",label:this.messages.panel.editLabel,"label-hide":!0,value:this.panelTitle,"onValue-change":this.handleUpdateTitle,characterLeftHide:!0,pattern:this.titlePattern,"pattern-error-message":this.titlePatternErrorMessage,identifier:this.identifier+"-edition-input",ref:t=>this.editInputElement=t},s("mg-button",{slot:"append-input",label:this.messages.general.cancel,"is-icon":!0,variant:"secondary",onClick:this.handleCancelEditButton},s("mg-icon",{icon:"cross"})),s("mg-button",{slot:"append-input",label:this.messages.general.confirm,"is-icon":!0,variant:"secondary",onClick:this.handleValidateEditButton},s("mg-icon",{icon:"check"}))),this.renderTitle=()=>{const t=[this.renderCollapseButton()];return this.titleEditable&&!this.hasPanelTitleSlot()&&t.push(this.isEditing?this.renderEditInput():this.renderEditButton()),"right"===this.titlePosition?t.reverse():t},this.renderHeaderChildren=()=>{const t=[s("div",{class:{"mg-c-panel__header-title":!0,"mg-c-panel__header-title--full":this.isEditing,"mg-c-panel__header-title--reverse":"right"===this.titlePosition},key:this.panelTitle},this.renderTitle()),s("div",{class:"mg-c-panel__header-content",key:"slot-header"},s("slot",{name:"header-right"}))];return"right"===this.titlePosition?t.reverse():t}}watchIdentifier(t){o(t)||console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${r(t)}.`)}validatePanelTitle(t){if(void 0!==t){if(!c(t))throw Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${r(t)}.`);this.titleChange.emit(t)}}validateTitlePattern(t){if(void 0!==t&&!this.titleEditable)throw Error('<mg-panel> prop "titleEditable" must be set to "true".')}validateTitleEditable(t){if(t&&this.hasPanelTitleSlot())throw Error('<mg-panel> prop "titleEditable" cannot be used with panel-title slot.')}validateTitlePosition(t){if(!E.includes(t))throw Error(`<mg-panel> prop "titlePosition" must be one of: ${E.join(", ")}. Passed value: ${r(t)}.`)}handleExpanded(t){this.expandedChange.emit(t)}validateExpandToggleDisplay(t){if(!_.includes(t))throw Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${_.join(", ")}. Passed value: ${r(t)}.`);if("icon"===t&&this.titleEditable&&(this.titleEditable=!1),"icon"===t&&this.hasPanelTitleSlot())throw Error('<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.')}componentWillLoad(){if(this.messages=d(this.element).messages,this.watchIdentifier(this.identifier),this.validateTitlePattern(this.titlePattern),this.validateTitlePattern(this.titlePatternErrorMessage),!this.hasPanelTitleSlot()){if(!c(this.panelTitle))throw Error('<mg-panel> prop "panelTitle" is required when panel-title slot is not used.');this.validatePanelTitle(this.panelTitle)}this.validateExpandToggleDisplay(this.expandToggleDisplay),this.validateTitlePosition(this.titlePosition),this.validateTitleEditable(this.titleEditable)}componentDidRender(){this.isEditing&&this.editInputElement.setFocus()}render(){const t=this.identifier+"-header";return s("section",{key:"e92b270e15717a1b6ab7d938674ccd785fe3ee97",class:this.classCollection.join(),id:this.identifier},s("mg-card",{key:"40647ea277463f5e915c2fb5aa982f22527545ea",shadow:this.shadow},s("header",{key:"604611af47d683cf1f0d3ffc8b5873be390e3fb9",class:{"mg-c-panel__header":!0,"mg-c-panel__header--reverse":"right"===this.titlePosition},id:t},this.renderHeaderChildren()),s("article",{key:"ff640071dd4813aa113f5928b2a0350f4528a22c",class:"mg-c-panel__content",id:this.identifier+"-content","aria-labelledby":t,hidden:!this.expanded},s("slot",{key:"fe54d2ca332c573e8dfa782a3e72454501b47adf"}))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],panelTitle:[{validatePanelTitle:0}],titlePattern:[{validateTitlePattern:0}],titlePatternErrorMessage:[{validateTitlePattern:0}],titleEditable:[{validateTitleEditable:0}],titlePosition:[{validateTitlePosition:0}],expanded:[{handleExpanded:0}],expandToggleDisplay:[{validateExpandToggleDisplay:0}]}}static get style(){return":host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::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-panel",{identifier:[1],panelTitle:[1025,"panel-title"],titlePattern:[1,"title-pattern"],titlePatternErrorMessage:[1,"title-pattern-error-message"],titleEditable:[1028,"title-editable"],titlePosition:[1,"title-position"],expanded:[1028],expandToggleDisplay:[1,"expand-toggle-display"],expandToggleDisabled:[4,"expand-toggle-disabled"],shadow:[4],classCollection:[32],isEditing:[32],updatedPanelTitle:[32]},void 0,{identifier:[{watchIdentifier:0}],panelTitle:[{validatePanelTitle:0}],titlePattern:[{validateTitlePattern:0}],titlePatternErrorMessage:[{validateTitlePattern:0}],titleEditable:[{validateTitleEditable:0}],titlePosition:[{validateTitlePosition:0}],expanded:[{handleExpanded:0}],expandToggleDisplay:[{validateExpandToggleDisplay:0}]}]);function T(){"undefined"!=typeof customElements&&["mg-panel","mg-button","mg-card","mg-character-left","mg-icon","mg-input","mg-input-text","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((e=>{switch(e){case"mg-panel":customElements.get(t(e))||customElements.define(t(e),w);break;case"mg-button":customElements.get(t(e))||h();break;case"mg-card":customElements.get(t(e))||m();break;case"mg-character-left":customElements.get(t(e))||g();break;case"mg-icon":customElements.get(t(e))||p();break;case"mg-input":customElements.get(t(e))||u();break;case"mg-input-text":customElements.get(t(e))||f();break;case"mg-input-title":customElements.get(t(e))||b();break;case"mg-tooltip":customElements.get(t(e))||v();break;case"mg-tooltip-content":customElements.get(t(e))||x()}}))}T();const k=w,y=T;export{k as MgPanel,y as defineCustomElement}
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{c as n,C as l,a as o,t as r,i as c}from"./index2.js";import{i as d}from"./index3.js";import{d as h}from"./mg-button2.js";import{d as m}from"./mg-card2.js";import{d as g}from"./mg-character-left2.js";import{d as p}from"./mg-icon2.js";import{d as u}from"./mg-input2.js";import{d as b}from"./mg-input-text2.js";import{d as f}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as x}from"./mg-tooltip-content2.js";const _=["text","icon"],E=["left","right"],w=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.titleChange=a(this,"title-change",7),this.expandedChange=a(this,"expanded-change",7),this.identifier=n("mg-panel"),this.titleEditable=!1,this.titlePosition="left",this.expanded=!1,this.expandToggleDisplay="text",this.expandToggleDisabled=!1,this.shadow=!1,this.classCollection=new l(["mg-c-panel"]),this.isEditing=!1,this.hasPanelTitleSlot=()=>null!==this.element.querySelector('[slot="panel-title"]'),this.toggleIsEditing=()=>{this.isEditing=!this.isEditing},this.handleCollapseButton=()=>{this.expandToggleDisabled||(this.expanded=!this.expanded)},this.handleEditButton=()=>{this.toggleIsEditing()},this.handleUpdateTitle=t=>{this.updatedPanelTitle=t.detail},this.handleCancelEditButton=()=>{this.updatedPanelTitle=void 0,this.toggleIsEditing()},this.handleValidateEditButton=()=>{this.editInputElement.valid&&(void 0!==this.updatedPanelTitle&&(this.panelTitle=this.updatedPanelTitle),this.toggleIsEditing())},this.renderCollapseButton=()=>s("mg-button",{onClick:this.handleCollapseButton,variant:"flat","aria-expanded":""+this.expanded,"aria-controls":this.identifier+"-content",disabled:this.expandToggleDisabled,isIcon:"icon"===this.expandToggleDisplay,label:"icon"===this.expandToggleDisplay?this.panelTitle:void 0},s("span",{class:"mg-c-panel__collapse-button-content"},s("mg-icon",{icon:"chevron-up",class:{"mg-c-panel__collapse-button-icon":!0,"mg-c-panel__collapse-button-icon--reverse":!this.expanded}}),!this.isEditing&&"icon"!==this.expandToggleDisplay&&(this.hasPanelTitleSlot()?s("slot",{name:"panel-title"}):this.panelTitle))),this.renderEditButton=()=>s("mg-button",{key:"edit-button","is-icon":!0,variant:"flat",label:this.messages.panel.editLabel,onClick:this.handleEditButton},s("mg-icon",{icon:"pen"})),this.renderEditInput=()=>s("mg-input-text",{key:"edition-input",label:this.messages.panel.editLabel,"label-hide":!0,value:this.panelTitle,"onValue-change":this.handleUpdateTitle,characterLeftHide:!0,pattern:this.titlePattern,"pattern-error-message":this.titlePatternErrorMessage,identifier:this.identifier+"-edition-input",ref:t=>this.editInputElement=t},s("mg-button",{slot:"append-input",label:this.messages.general.cancel,"is-icon":!0,variant:"secondary",onClick:this.handleCancelEditButton},s("mg-icon",{icon:"cross"})),s("mg-button",{slot:"append-input",label:this.messages.general.confirm,"is-icon":!0,variant:"secondary",onClick:this.handleValidateEditButton},s("mg-icon",{icon:"check"}))),this.renderTitle=()=>{const t=[this.renderCollapseButton()];return this.titleEditable&&!this.hasPanelTitleSlot()&&t.push(this.isEditing?this.renderEditInput():this.renderEditButton()),"right"===this.titlePosition?t.reverse():t},this.renderHeaderChildren=()=>{const t=[s("div",{class:{"mg-c-panel__header-title":!0,"mg-c-panel__header-title--full":this.isEditing,"mg-c-panel__header-title--reverse":"right"===this.titlePosition},key:this.panelTitle},this.renderTitle()),s("div",{class:"mg-c-panel__header-content",key:"slot-header"},s("slot",{name:"header-right"}))];return"right"===this.titlePosition?t.reverse():t}}watchIdentifier(t){o(t)||console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${r(t)}.`)}validatePanelTitle(t){if(void 0!==t){if(!c(t))throw Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${r(t)}.`);this.titleChange.emit(t)}}validateTitlePattern(t){if(void 0!==t&&!this.titleEditable)throw Error('<mg-panel> prop "titleEditable" must be set to "true".')}validateTitleEditable(t){if(t&&this.hasPanelTitleSlot())throw Error('<mg-panel> prop "titleEditable" cannot be used with panel-title slot.')}validateTitlePosition(t){if(!E.includes(t))throw Error(`<mg-panel> prop "titlePosition" must be one of: ${E.join(", ")}. Passed value: ${r(t)}.`)}handleExpanded(t){this.expandedChange.emit(t)}validateExpandToggleDisplay(t){if(!_.includes(t))throw Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${_.join(", ")}. Passed value: ${r(t)}.`);if("icon"===t&&this.titleEditable&&(this.titleEditable=!1),"icon"===t&&this.hasPanelTitleSlot())throw Error('<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.')}componentWillLoad(){if(this.messages=d(this.element).messages,this.watchIdentifier(this.identifier),this.validateTitlePattern(this.titlePattern),this.validateTitlePattern(this.titlePatternErrorMessage),!this.hasPanelTitleSlot()){if(!c(this.panelTitle))throw Error('<mg-panel> prop "panelTitle" is required when panel-title slot is not used.');this.validatePanelTitle(this.panelTitle)}this.validateExpandToggleDisplay(this.expandToggleDisplay),this.validateTitlePosition(this.titlePosition),this.validateTitleEditable(this.titleEditable)}componentDidRender(){this.isEditing&&this.editInputElement.setFocus()}render(){const t=this.identifier+"-header";return s("section",{key:"3662204d763051c34ea13de4b7b3f7abc7914b81",class:this.classCollection.join(),id:this.identifier},s("mg-card",{key:"46f113258172b1d040f65a4d312554b0c0551489",shadow:this.shadow},s("header",{key:"1d7e7a48a5c4f89d141a5a7e46b220d4f9c082a5",class:{"mg-c-panel__header":!0,"mg-c-panel__header--reverse":"right"===this.titlePosition},id:t},this.renderHeaderChildren()),s("article",{key:"ab0aec831cc79d982b7556d6e245c80ae2979083",class:"mg-c-panel__content",id:this.identifier+"-content","aria-labelledby":t,hidden:!this.expanded},s("slot",{key:"e831573fe9d5ff783073d123b7e2a54baad73bfc"}))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],panelTitle:[{validatePanelTitle:0}],titlePattern:[{validateTitlePattern:0}],titlePatternErrorMessage:[{validateTitlePattern:0}],titleEditable:[{validateTitleEditable:0}],titlePosition:[{validateTitlePosition:0}],expanded:[{handleExpanded:0}],expandToggleDisplay:[{validateExpandToggleDisplay:0}]}}static get style(){return":host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::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-panel",{identifier:[1],panelTitle:[1025,"panel-title"],titlePattern:[1,"title-pattern"],titlePatternErrorMessage:[1,"title-pattern-error-message"],titleEditable:[1028,"title-editable"],titlePosition:[1,"title-position"],expanded:[1028],expandToggleDisplay:[1,"expand-toggle-display"],expandToggleDisabled:[4,"expand-toggle-disabled"],shadow:[4],classCollection:[32],isEditing:[32],updatedPanelTitle:[32]},void 0,{identifier:[{watchIdentifier:0}],panelTitle:[{validatePanelTitle:0}],titlePattern:[{validateTitlePattern:0}],titlePatternErrorMessage:[{validateTitlePattern:0}],titleEditable:[{validateTitleEditable:0}],titlePosition:[{validateTitlePosition:0}],expanded:[{handleExpanded:0}],expandToggleDisplay:[{validateExpandToggleDisplay:0}]}]);function T(){"undefined"!=typeof customElements&&["mg-panel","mg-button","mg-card","mg-character-left","mg-icon","mg-input","mg-input-text","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((e=>{switch(e){case"mg-panel":customElements.get(t(e))||customElements.define(t(e),w);break;case"mg-button":customElements.get(t(e))||h();break;case"mg-card":customElements.get(t(e))||m();break;case"mg-character-left":customElements.get(t(e))||g();break;case"mg-icon":customElements.get(t(e))||p();break;case"mg-input":customElements.get(t(e))||u();break;case"mg-input-text":customElements.get(t(e))||b();break;case"mg-input-title":customElements.get(t(e))||f();break;case"mg-tooltip":customElements.get(t(e))||v();break;case"mg-tooltip-content":customElements.get(t(e))||x()}}))}T();const k=w,y=T;export{k as MgPanel,y as defineCustomElement}

package/dist/components/mg-popover-content2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as o,HTMLElement as e,createEvent as r,h as a,Host as s}from"@stencil/core/internal/client";import{C as p,b as d}from"./index2.js";import{i as c}from"./index3.js";import{d as l}from"./mg-button2.js";import{d as i}from"./mg-card2.js";import{d as m}from"./mg-icon2.js";const n=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.hideContent=r(this,"hide-content",7),this.closeButton=!1,this.classCollection=new p(["mg-c-popover-content"]),this.handleCloseButton=()=>{this.hideContent.emit()}}componentWillLoad(){this.messages=c(this.element).messages}componentDidLoad(){const t=["h1","h2","h3","h4","h5","h6"],o=this.element.querySelector('[slot="title"]');if(o&&!d(o,t))throw new Error(`<mg-popover> Slotted title must be a heading: ${t.join(", ")}.`)}render(){return a(s,{key:"56962c792e0015e1b52f8121914829b7da136283"},a("mg-card",{key:"05b557704fd10e1be87e1931fe672f5c29d3afc4",class:this.classCollection.join(),shadow:!0},this.closeButton&&a("mg-button",{key:"d2fc38c5be7ea92d0d0efc36133d6c683baa4e68","is-icon":!0,variant:"flat",label:this.messages.general.close,onClick:this.handleCloseButton},a("mg-icon",{key:"5d2091d064f3908a291af3b90acaddc59e2b9268",icon:"cross"})),a("div",{key:"d599231cfe330cdbc73f4bf7553b2cc66baf4889",class:"mg-c-popover-content__title"},a("slot",{key:"fbb836bac9d9f5f2327ecba13ddc3b1cab974930",name:"title"})),a("slot",{key:"bdb29d255f35931efa24be57c13c4303ba326778",name:"content"})),a("slot",{key:"b09b667ea04096baaeac07fac9097a3a22335f2b",name:"arrow"}))}get element(){return this}static get style(){return':host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width);--mg-c-card-max-height:min( var(--mg-c-popover-max-height), 100vh - calc(var(--mg-b-size-min-height) + var(--mg-b-size-32)) );--mg-c-card-overflow:var(--mg-c-popover-overflow)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::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)}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:"";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-popover-border-radius)}'}},[257,"mg-popover-content",{closeButton:[4,"close-button"],classCollection:[32]}]);function g(){"undefined"!=typeof customElements&&["mg-popover-content","mg-button","mg-card","mg-icon"].forEach((o=>{switch(o){case"mg-popover-content":customElements.get(t(o))||customElements.define(t(o),n);break;case"mg-button":customElements.get(t(o))||l();break;case"mg-card":customElements.get(t(o))||i();break;case"mg-icon":customElements.get(t(o))||m()}}))}g();export{n as M,g as d}
+import{transformTag as t,proxyCustomElement as o,HTMLElement as e,createEvent as r,h as a,Host as s}from"@stencil/core/internal/client";import{C as p,b as d}from"./index2.js";import{i as c}from"./index3.js";import{d as l}from"./mg-button2.js";import{d as i}from"./mg-card2.js";import{d as m}from"./mg-icon2.js";const n=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.hideContent=r(this,"hide-content",7),this.closeButton=!1,this.classCollection=new p(["mg-c-popover-content"]),this.handleCloseButton=()=>{this.hideContent.emit()}}componentWillLoad(){this.messages=c(this.element).messages}componentDidLoad(){const t=["h1","h2","h3","h4","h5","h6"],o=this.element.querySelector('[slot="title"]');if(o&&!d(o,t))throw new Error(`<mg-popover> Slotted title must be a heading: ${t.join(", ")}.`)}render(){return a(s,{key:"054fc82954b39a488f7fe5cb391d89b5fa4a61fe"},a("mg-card",{key:"bb89bada37069b50295bd93d988667c3b85eada3",class:this.classCollection.join(),shadow:!0},this.closeButton&&a("mg-button",{key:"a59d6610574b964be1e2ce34ccd8e31c1395b6ff","is-icon":!0,variant:"flat",label:this.messages.general.close,onClick:this.handleCloseButton},a("mg-icon",{key:"5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4",icon:"cross"})),a("div",{key:"57be2022f3b61220e1249faeaf2acee9960027fe",class:"mg-c-popover-content__title"},a("slot",{key:"c7870e86a9f105cf6b9d4520c77874bce9235d72",name:"title"})),a("slot",{key:"5af8462232625d9c7d694bab46351d5e646f62ca",name:"content"})),a("slot",{key:"599863410dd7d751e82c440cd6c4fb7f2c48d9f3",name:"arrow"}))}get element(){return this}static get style(){return':host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width);--mg-c-card-max-height:min( var(--mg-c-popover-max-height), 100vh - calc(var(--mg-b-size-min-height) + var(--mg-b-size-32)) );--mg-c-card-overflow:var(--mg-c-popover-overflow)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::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)}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:"";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-popover-border-radius)}'}},[257,"mg-popover-content",{closeButton:[4,"close-button"],classCollection:[32]}]);function g(){"undefined"!=typeof customElements&&["mg-popover-content","mg-button","mg-card","mg-icon"].forEach((o=>{switch(o){case"mg-popover-content":customElements.get(t(o))||customElements.define(t(o),n);break;case"mg-button":customElements.get(t(o))||l();break;case"mg-card":customElements.get(t(o))||i();break;case"mg-icon":customElements.get(t(o))||m()}}))}g();export{n as M,g as d}

package/dist/components/mg-popover2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as s,h as o,Host as a}from"@stencil/core/internal/client";import{c as r,a as n,t as h,g as c}from"./index2.js";import{d}from"./mg-button2.js";import{d as l}from"./mg-card2.js";import{d as p}from"./mg-icon2.js";import{d as m}from"./mg-popover-content2.js";import{c as v}from"./popper.js";const g=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.displayChange=s(this,"display-change",7),this.componentClose=s(this,"component-close",7),this.identifier=r("mg-popover"),this.placement="bottom",this.arrowHide=!1,this.closeButton=!1,this.display=!1,this.disabled=!1,this.clickOutside=t=>{this.disabled||t.target.closest("mg-popover")===this.element||null!==t.target.closest(`[data-mg-popover-guard="${this.identifier}"]`)||(this.display=!1)},this.show=()=>{this.mgPopover.dataset.show="",this.interactiveElement.setAttribute("aria-expanded","true"),this.setPopperListeners(!0),setTimeout((()=>{this.manageClickOutsideListeners("addEventListener")}))},this.hide=()=>{this.mgPopover.removeAttribute("data-show"),this.interactiveElement.setAttribute("aria-expanded","false"),this.setPopperListeners(!1),this.manageClickOutsideListeners("removeEventListener")},this.setPopperListeners=t=>{this.popper.setOptions((e=>Object.assign(Object.assign({},e),{modifiers:[...e.modifiers,{name:"eventListeners",enabled:t}]})))},this.manageClickOutsideListeners=t=>{var e,i;[...Array.from((null===(i=null===(e=document.querySelector(`[data-mg-popover-guard="${this.identifier}"]`))||void 0===e?void 0:e.shadowRoot)||void 0===i?void 0:i.children)||new Set),...this.windows].forEach((e=>{null!==e&&e[t]("click",this.clickOutside,!1)}))},this.handleHideContent=()=>{this.display=!1,this.componentClose.emit()},this.renderPopoverContent=()=>{const t=this.element.querySelector("mg-popover-content");if(null===t){this.mgPopoverContent=document.createElement("mg-popover-content"),this.mgPopoverContent.setAttribute("slot","content"),this.mgPopoverContent.setAttribute("id",this.identifier),this.mgPopoverContent.addEventListener("hide-content",this.handleHideContent);const t=document.createElement("div");t.setAttribute("slot","arrow"),t.dataset.popperArrow="",this.mgPopoverContent.appendChild(t),['[slot="title"]','[slot="content"]:not(mg-popover-content)'].forEach((t=>{Array.from(this.element.querySelectorAll(t)).forEach((t=>{this.mgPopoverContent.appendChild(t)}))})),this.element.appendChild(this.mgPopoverContent)}else t.setAttribute("id",this.identifier)}}validateIdentifier(t){if(!n(t))throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${h(t)}.`);this.renderPopoverContent()}validateArrowHide(t){t?this.mgPopoverContent.dataset.arrowHide="":delete this.mgPopoverContent.dataset.arrowHide}validateCloseButton(t){this.mgPopoverContent.closeButton=t}handleDisplay(t){t?this.show():this.hide(),this.displayChange.emit(t)}componentDidUpdate(){this.popper.update()}componentWillLoad(){this.windows=c(window),this.renderPopoverContent(),this.validateCloseButton(this.closeButton),this.validateIdentifier(this.identifier),this.validateArrowHide(this.arrowHide)}componentDidLoad(){this.mgPopover=this.element.querySelector(`#${this.identifier}`),this.interactiveElement=this.element.querySelector(":not([slot])"),this.interactiveElement.setAttribute("aria-controls",this.identifier),this.interactiveElement.setAttribute("aria-expanded",`${this.display}`);const t=[];void 0!==this.element.dataset.fallbackPlacement&&t.push(this.element.dataset.fallbackPlacement),this.popper=v(this.interactiveElement,this.mgPopover,{placement:this.placement,strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"flip",options:{fallbackPlacements:[...t,"auto"]}}]}),[this.interactiveElement,this.element.querySelector("mg-popover-content")].forEach((t=>{new ResizeObserver((()=>{this.popper.update()})).observe(t)})),this.interactiveElement.addEventListener("click",(()=>{this.disabled||(this.display=!this.display)})),this.element.addEventListener("click",(t=>{const e=t.target.closest("[popovertargetaction]");!0===this.display&&null!==e&&"hide"===e.getAttribute("popovertargetaction")&&(this.display=!1)})),this.element.addEventListener("keydown",(t=>{this.disabled||"Escape"!==t.code||(this.display=!1,this.componentClose.emit(),this.interactiveElement.focus())})),this.handleDisplay(this.display)}render(){return o(a,{key:"530971c84be3edae39c5aed0013d0c5b9005a1c1"},o("slot",{key:"6e717bc8c5aa3d58fc048c4232e706cc78ab66ec"}),o("slot",{key:"e779db01e55a28ffaedde21e9944f5ef3c79fa29",name:"content"}))}get element(){return this}static get watchers(){return{identifier:[{validateIdentifier:0}],arrowHide:[{validateArrowHide:0}],closeButton:[{validateCloseButton:0}],display:[{handleDisplay:0}]}}static get style(){return":host{--mg-c-card-spacing:var(--mg-c-popover-spacing-vertical, var(--mg-b-size-16)) var(--mg-c-popover-spacing-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-c-popover-border-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}"}},[257,"mg-popover",{identifier:[1],placement:[1],arrowHide:[4,"arrow-hide"],closeButton:[4,"close-button"],display:[1028],disabled:[4]},void 0,{identifier:[{validateIdentifier:0}],arrowHide:[{validateArrowHide:0}],closeButton:[{validateCloseButton:0}],display:[{handleDisplay:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-popover","mg-button","mg-card","mg-icon","mg-popover-content"].forEach((e=>{switch(e){case"mg-popover":customElements.get(t(e))||customElements.define(t(e),g);break;case"mg-button":customElements.get(t(e))||d();break;case"mg-card":customElements.get(t(e))||l();break;case"mg-icon":customElements.get(t(e))||p();break;case"mg-popover-content":customElements.get(t(e))||m()}}))}u();export{g as M,u as d}
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as s,h as o,Host as a}from"@stencil/core/internal/client";import{c as r,a as n,t as h,g as c}from"./index2.js";import{d}from"./mg-button2.js";import{d as l}from"./mg-card2.js";import{d as p}from"./mg-icon2.js";import{d as m}from"./mg-popover-content2.js";import{c as v}from"./popper.js";const g=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.displayChange=s(this,"display-change",7),this.componentClose=s(this,"component-close",7),this.identifier=r("mg-popover"),this.placement="bottom",this.arrowHide=!1,this.closeButton=!1,this.display=!1,this.disabled=!1,this.clickOutside=t=>{this.disabled||t.target.closest("mg-popover")===this.element||null!==t.target.closest(`[data-mg-popover-guard="${this.identifier}"]`)||(this.display=!1)},this.show=()=>{this.mgPopover.dataset.show="",this.interactiveElement.setAttribute("aria-expanded","true"),this.setPopperListeners(!0),setTimeout((()=>{this.manageClickOutsideListeners("addEventListener")}))},this.hide=()=>{this.mgPopover.removeAttribute("data-show"),this.interactiveElement.setAttribute("aria-expanded","false"),this.setPopperListeners(!1),this.manageClickOutsideListeners("removeEventListener")},this.setPopperListeners=t=>{this.popper.setOptions((e=>Object.assign(Object.assign({},e),{modifiers:[...e.modifiers,{name:"eventListeners",enabled:t}]})))},this.manageClickOutsideListeners=t=>{var e,i;[...Array.from((null===(i=null===(e=document.querySelector(`[data-mg-popover-guard="${this.identifier}"]`))||void 0===e?void 0:e.shadowRoot)||void 0===i?void 0:i.children)||new Set),...this.windows].forEach((e=>{null!==e&&e[t]("click",this.clickOutside,!1)}))},this.handleHideContent=()=>{this.display=!1,this.componentClose.emit()},this.renderPopoverContent=()=>{const t=this.element.querySelector("mg-popover-content");if(null===t){this.mgPopoverContent=document.createElement("mg-popover-content"),this.mgPopoverContent.setAttribute("slot","content"),this.mgPopoverContent.setAttribute("id",this.identifier),this.mgPopoverContent.addEventListener("hide-content",this.handleHideContent);const t=document.createElement("div");t.setAttribute("slot","arrow"),t.dataset.popperArrow="",this.mgPopoverContent.appendChild(t),['[slot="title"]','[slot="content"]:not(mg-popover-content)'].forEach((t=>{Array.from(this.element.querySelectorAll(t)).forEach((t=>{this.mgPopoverContent.appendChild(t)}))})),this.element.appendChild(this.mgPopoverContent)}else t.setAttribute("id",this.identifier)}}validateIdentifier(t){if(!n(t))throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${h(t)}.`);this.renderPopoverContent()}validateArrowHide(t){t?this.mgPopoverContent.dataset.arrowHide="":delete this.mgPopoverContent.dataset.arrowHide}validateCloseButton(t){this.mgPopoverContent.closeButton=t}handleDisplay(t){t?this.show():this.hide(),this.displayChange.emit(t)}componentDidUpdate(){this.popper.update()}componentWillLoad(){this.windows=c(window),this.renderPopoverContent(),this.validateCloseButton(this.closeButton),this.validateIdentifier(this.identifier),this.validateArrowHide(this.arrowHide)}componentDidLoad(){this.mgPopover=this.element.querySelector(`#${this.identifier}`),this.interactiveElement=this.element.querySelector(":not([slot])"),this.interactiveElement.setAttribute("aria-controls",this.identifier),this.interactiveElement.setAttribute("aria-expanded",`${this.display}`);const t=[];void 0!==this.element.dataset.fallbackPlacement&&t.push(this.element.dataset.fallbackPlacement),this.popper=v(this.interactiveElement,this.mgPopover,{placement:this.placement,strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"flip",options:{fallbackPlacements:[...t,"auto"]}}]}),[this.interactiveElement,this.element.querySelector("mg-popover-content")].forEach((t=>{new ResizeObserver((()=>{this.popper.update()})).observe(t)})),this.interactiveElement.addEventListener("click",(()=>{this.disabled||(this.display=!this.display)})),this.element.addEventListener("click",(t=>{const e=t.target.closest("[popovertargetaction]");!0===this.display&&null!==e&&"hide"===e.getAttribute("popovertargetaction")&&(this.display=!1)})),this.element.addEventListener("keydown",(t=>{this.disabled||"Escape"!==t.code||(this.display=!1,this.componentClose.emit(),this.interactiveElement.focus())})),this.handleDisplay(this.display)}render(){return o(a,{key:"2c1506b8e2da100519aeeae75fc5c378a81c473c"},o("slot",{key:"f9aea885e8cbc168614c05761829f0a0740eba9e"}),o("slot",{key:"fa6106a660a73b3761d4783f8d46d401c47b4eb6",name:"content"}))}get element(){return this}static get watchers(){return{identifier:[{validateIdentifier:0}],arrowHide:[{validateArrowHide:0}],closeButton:[{validateCloseButton:0}],display:[{handleDisplay:0}]}}static get style(){return":host{--mg-c-card-spacing:var(--mg-c-popover-spacing-vertical, var(--mg-b-size-16)) var(--mg-c-popover-spacing-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-c-popover-border-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}"}},[257,"mg-popover",{identifier:[1],placement:[1],arrowHide:[4,"arrow-hide"],closeButton:[4,"close-button"],display:[1028],disabled:[4]},void 0,{identifier:[{validateIdentifier:0}],arrowHide:[{validateArrowHide:0}],closeButton:[{validateCloseButton:0}],display:[{handleDisplay:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-popover","mg-button","mg-card","mg-icon","mg-popover-content"].forEach((e=>{switch(e){case"mg-popover":customElements.get(t(e))||customElements.define(t(e),g);break;case"mg-button":customElements.get(t(e))||d();break;case"mg-card":customElements.get(t(e))||l();break;case"mg-icon":customElements.get(t(e))||p();break;case"mg-popover-content":customElements.get(t(e))||m()}}))}u();export{g as M,u as d}

package/dist/components/mg-progress.js

@@ -1 +1 @@
-import{transformTag as r,proxyCustomElement as e,HTMLElement as s,h as a,Host as t}from"@stencil/core/internal/client";import{i,t as o,q as c}from"./index2.js";const l=["progressbar","meter"],h=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.ariaRole="progressbar",this.value=0,this.min=0,this.max=100}watchLabel(r){if(!i(r))throw Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${o(r)}.`)}watchAriaRole(r){if(r&&!l.includes(r))throw Error(`<mg-progress> prop "ariaRole" must be one of: ${l.join(", ")}. Passed value: ${o(r)}.`)}watchValue(r){if(!(void 0===r||c(r)&&r>=this.min&&r<=this.max))throw Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${o(r)}.`)}watchMin(r){if(0!==r&&void 0!==r&&(!c(r)||r>=this.max))throw Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${o(r)}.`)}watchMax(r){if(100!==r&&void 0!==r&&(!c(r)||r<=this.min))throw Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${o(r)}.`)}componentWillLoad(){this.watchLabel(this.label),this.watchAriaRole(this.ariaRole),this.watchMin(this.min),this.watchMax(this.max),this.watchValue(this.value)}render(){return a(t,{key:"02466f9df3e5204eef158b9f733ba0af811ad9ed",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},a("div",{key:"88c2eafe55d169502ef5afccfbde3371fee5165f",class:"mg-c-progress"},a("div",{key:"b46159dbed388c58b198bdc330096669c454bcd3",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},a("div",{key:"0faebcc86cc7a55ccab3d9fb8dce4403bff16ebf",class:"mg-c-progress__fill",style:{width:Math.round((this.value-this.min)/(this.max-this.min)*100)+"%"}}))))}static get watchers(){return{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}}static get style(){return".mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}"}},[1,"mg-progress",{label:[1],ariaRole:[1,"aria-role"],value:[2],min:[2],max:[2]},void 0,{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-progress"].forEach((e=>{"mg-progress"===e&&(customElements.get(r(e))||customElements.define(r(e),h))}))}g();const m=h,b=g;export{m as MgProgress,b as defineCustomElement}
+import{transformTag as r,proxyCustomElement as e,HTMLElement as s,h as a,Host as t}from"@stencil/core/internal/client";import{i,t as o,p as c}from"./index2.js";const l=["progressbar","meter"],h=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.ariaRole="progressbar",this.value=0,this.min=0,this.max=100}watchLabel(r){if(!i(r))throw Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${o(r)}.`)}watchAriaRole(r){if(r&&!l.includes(r))throw Error(`<mg-progress> prop "ariaRole" must be one of: ${l.join(", ")}. Passed value: ${o(r)}.`)}watchValue(r){if(!(void 0===r||c(r)&&r>=this.min&&r<=this.max))throw Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${o(r)}.`)}watchMin(r){if(0!==r&&void 0!==r&&(!c(r)||r>=this.max))throw Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${o(r)}.`)}watchMax(r){if(100!==r&&void 0!==r&&(!c(r)||r<=this.min))throw Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${o(r)}.`)}componentWillLoad(){this.watchLabel(this.label),this.watchAriaRole(this.ariaRole),this.watchMin(this.min),this.watchMax(this.max),this.watchValue(this.value)}render(){return a(t,{key:"8e6c727e9416fa777fd94b32d618a9137e8e08f7",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},a("div",{key:"ac42ee9c5dda55d70aad7391895e4a013aaa27f9",class:"mg-c-progress"},a("div",{key:"34c77bc6c133bc59b9daa68d7d6c8534f13f7d37",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},a("div",{key:"7ea03a3f0c54ca0c81616c7c070d178a510dd7e1",class:"mg-c-progress__fill",style:{width:Math.round((this.value-this.min)/(this.max-this.min)*100)+"%"}}))))}static get watchers(){return{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}}static get style(){return".mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}"}},[1,"mg-progress",{label:[1],ariaRole:[1,"aria-role"],value:[2],min:[2],max:[2]},void 0,{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-progress"].forEach((e=>{"mg-progress"===e&&(customElements.get(r(e))||customElements.define(r(e),h))}))}g();const m=h,d=g;export{m as MgProgress,d as defineCustomElement}