@mgdis/mg-components 6.26.0 → 6.27.0

package/dist/components/mg-button2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,t as c,i as b,n as d}from"./index2.js";import{n as g}from"./index3.js";import{K as s}from"./events.utils.js";import{d as u}from"./mg-icon2.js";const m=["medium","large"],l=["primary","secondary","danger","danger-alt","info","flat","success","link"],h=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[s.ENTER,s.NUMPADENTER,s.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))}}validateVariant(t,o){if(!l.includes(t)){if(""===t)return void(this.variant=l[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${l.join(", ")}. Passed value: ${c(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!m.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${m.join(", ")}. Passed value: ${c(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t){if(this.classCollection.add("mg-c-button--icon"),!b(this.label))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.')}else this.classCollection.delete("mg-c-button--icon");this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){g(this),this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){d((()=>{var t;const o=this.element.closest("form")||(null===(t=this.element.closest("mg-form"))||void 0===t?void 0:t.shadowRoot.querySelector("form"));o&&["submit",void 0].includes(this.type)&&this.element.addEventListener("click",(()=>{o.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))}))}))}render(){var t;return i(e,{key:"9efa9dbbcdb2965cb8fd301c86988d0b0d97b474",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"36918b5b208a9e0a9650107f4418cac35ade1ed2",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"8ad3e911d273f69441f2a405f8040cc685a0a486",icon:"loader",spin:!0}),i("div",{key:"a6b199c669ef6b15bfc345c98192290ce11e65cb",class:"mg-c-button__content"},i("slot",{key:"b13d317001dbf66c945cdf9e97c06338ce073c12"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),h);break;case"mg-icon":customElements.get(t(o))||u()}}))}v();export{h as M,v as d}
+import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,t as c,i as b,n as d}from"./index2.js";import{n as g}from"./index3.js";import{K as s}from"./events.utils.js";import{d as u}from"./mg-icon2.js";const m=["medium","large"],l=["primary","secondary","danger","danger-alt","info","flat","success","link"],h=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[s.ENTER,s.NUMPADENTER,s.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))}}validateVariant(t,o){if(!l.includes(t)){if(""===t)return void(this.variant=l[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${l.join(", ")}. Passed value: ${c(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!m.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${m.join(", ")}. Passed value: ${c(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t){if(this.classCollection.add("mg-c-button--icon"),!b(this.label))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.')}else this.classCollection.delete("mg-c-button--icon");this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){g(this),this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){d((()=>{var t;const o=this.element.closest("form")||(null===(t=this.element.closest("mg-form"))||void 0===t?void 0:t.shadowRoot.querySelector("form"));o&&["submit",void 0].includes(this.type)&&this.element.addEventListener("click",(()=>{o.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))}))}))}render(){var t;return i(e,{key:"9efa9dbbcdb2965cb8fd301c86988d0b0d97b474",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"36918b5b208a9e0a9650107f4418cac35ade1ed2",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"8ad3e911d273f69441f2a405f8040cc685a0a486",icon:"loader",spin:!0}),i("div",{key:"a6b199c669ef6b15bfc345c98192290ce11e65cb",class:"mg-c-button__content"},i("slot",{key:"b13d317001dbf66c945cdf9e97c06338ce073c12"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled),.mg-c-button--flat:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;color:inherit;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled);pointer-events:none}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}.mg-c-button:focus-visible{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),h);break;case"mg-icon":customElements.get(t(o))||u()}}))}v();export{h as M,v as d}

package/dist/components/mg-details.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{i as n}from"./index2.js";import{n as d}from"./index3.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.expandedChange=a(this,"expanded-change",7),this.hideSummary=!1,this.expanded=!1,this.handleToggle=()=>{this.expanded=this.details.open}}validateTitles(e){if(!n(e))throw Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`)}handleExpanded(e){this.expandedChange.emit(e)}componentWillLoad(){d(this),this.validateTitles(this.toggleClosed),this.validateTitles(this.toggleOpened);const e=this.element.querySelector('[slot="summary"]');this.isEmptySummary=null===e||!n(e.textContent),this.element.addEventListener("click",(e=>{null!==e.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]')&&e.preventDefault()}))}render(){return s("details",{key:"78dbeab3b3e6c245bda8fad5900b70727fd47595",class:{"mg-c-details":!0,"mg-c-details--empty-summary":this.isEmptySummary},onToggle:this.handleToggle,open:this.expanded,ref:e=>this.details=e},s("summary",{key:"766e4756a66a1f8e6bc2159f30133a0702353f32"},s("slot",{key:"3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee",name:"summary"}),s("span",{key:"7c8d3da4df69d2802f104caaf568ac513f9f03b6",class:"mg-c-details__toggle"},s("mg-icon",{key:"44da384780ab768bde20acb58885280e193de921",icon:"chevron-up",class:{"mg-c-details__toggle-icon":!0,"mg-c-details__toggle-icon--reverse":!this.expanded}}),s("span",{key:"387de0caa5ae819c89449e5063e0b6e05b3df8fe",class:{"mg-u-visually-hidden":this.hideSummary}},this.expanded?this.toggleOpened:this.toggleClosed))),s("div",{key:"48c1fe8df990a250f098594d9b50df947613955c",class:"mg-c-details__details"},s("slot",{key:"95554b4d890750cc3b3008965be3e5954d49d810",name:"details"})))}get element(){return this}static get watchers(){return{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span *{overflow:hidden !important}}"}},[257,"mg-details",{toggleClosed:[1,"toggle-closed"],toggleOpened:[1,"toggle-opened"],hideSummary:[4,"hide-summary"],expanded:[1028]},void 0,{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-details","mg-icon"].forEach((t=>{switch(t){case"mg-details":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||o()}}))}l();const r=m,g=l;export{r as MgDetails,g as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{i as n}from"./index2.js";import{n as m}from"./index3.js";import{d as o}from"./mg-icon2.js";const d=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedChange=a(this,"expanded-change",7),this.hideSummary=!1,this.expanded=!1,this.handleToggle=()=>{this.expanded=this.details.open}}validateTitles(e){if(!n(e))throw Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`)}handleExpanded(e){this.expandedChange.emit(e)}componentWillLoad(){m(this),this.validateTitles(this.toggleClosed),this.validateTitles(this.toggleOpened);const e=this.element.querySelector('[slot="summary"]');this.isEmptySummary=null===e||!n(e.textContent),this.element.addEventListener("click",(e=>{null!==e.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]')&&e.preventDefault()}))}render(){return s("details",{key:"12eac25682e22d65ace61f6697656459d1494903",class:{"mg-c-details":!0,"mg-c-details--hide-summary":this.hideSummary,"mg-c-details--empty-summary":this.isEmptySummary},onToggle:this.handleToggle,open:this.expanded,ref:e=>this.details=e},s("summary",{key:"d6d621db04bca17297f770a633fcb17711f99ecf"},s("slot",{key:"245aad29a2f2cd93e3a5426ce1e010ab6f5b5e07",name:"summary"}),s("span",{key:"ebfe3c80a00b9b7a38a670f536a3984420ec3945",class:"mg-c-details__toggle"},s("mg-icon",{key:"73c4eb27b3d6aa9168bf6af9fa118afc51b8ee1a",icon:"chevron-up",class:{"mg-c-details__toggle-icon":!0,"mg-c-details__toggle-icon--reverse":!this.expanded}}),s("span",{key:"96730ec386137f7f3aa463b76c20547a5922f294",class:{"mg-u-visually-hidden":this.hideSummary}},this.expanded?this.toggleOpened:this.toggleClosed))),s("div",{key:"8ac6eee499e613a543fd2a2ea9d954719d48005d",class:"mg-c-details__details"},s("slot",{key:"37af4674491d7857163dcc48424e652cfcefbed6",name:"details"})))}get element(){return this}static get watchers(){return{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--hide-summary summary{gap:var(--mg-b-size-4)}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span *{overflow:hidden !important}}"}},[257,"mg-details",{toggleClosed:[1,"toggle-closed"],toggleOpened:[1,"toggle-opened"],hideSummary:[4,"hide-summary"],expanded:[1028]},void 0,{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-details","mg-icon"].forEach((t=>{switch(t){case"mg-details":customElements.get(e(t))||customElements.define(e(t),d);break;case"mg-icon":customElements.get(e(t))||o()}}))}l();const r=d,g=l;export{r as MgDetails,g as defineCustomElement}

package/dist/components/mg-form.js

@@ -1 +1 @@
-import{transformTag as i,proxyCustomElement as t,HTMLElement as e,createEvent as s,h as r}from"@stencil/core/internal/client";import{c as a,C as h,a as o,t as n}from"./index2.js";import{n as l}from"./index3.js";import{i as d}from"./index4.js";import{i as m}from"./mg-input.conf.js";const c=["form","search","none","presentation"],f=["default","hide"],u=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.formValid=s(this,"form-valid",7),this.formSubmit=s(this,"form-submit",7),this.formReset=s(this,"form-reset",7),this.classAllRequired="mg-c-form--all-required",this.classLabelOnTop="mg-c-form--label-on-top",this.identifier=a("mg-form"),this.name=this.identifier,this.readonly=!1,this.labelOnTop=!1,this.disabled=!1,this.classCollection=new h(["mg-c-form"]),this.setRequiredMessage=()=>{if(this.requiredMessageText=null,this.classCollection.delete(this.classAllRequired),"hide"===this.requiredMessage)return;if("default"===this.requiredMessage)return void(this.requiredMessageText=this.messages.form.required);const i=i=>!(i.disabled||i.readonly),t=i=>"MG-INPUT-TOGGLE"===i.nodeName;if(!this.disabled&&!this.readonly&&this.mgInputs.some((e=>i(e)&&!t(e)))){const e=this.mgInputs.filter(i),s=e.filter((i=>!t(i)&&i.required));[s.length,e.length].every((i=>1===i))||s.length>1&&s.length===e.filter((i=>!t(i))).length?(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"allRequiredSingle","allRequired"),this.classCollection.add(this.classAllRequired)):s.length>0&&(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"requiredSingle","required"))}},this.getRequiredMessageBasedOnCount=(i,t,e)=>this.messages.form[1===i.length?t:e],this.checkValidity=()=>{this.setRequiredMessage(),this.valid=!this.mgInputs.some((i=>i.invalid)),this.invalid=!this.valid,this.formValid.emit(this.valid)},this.handleFormSubmit=i=>{i.preventDefault(),this.formSubmit.emit()},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((i=>i.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((i=>{this.labelOnTop&&(i.labelOnTop=!0),"MG-INPUT-FILE"===i.nodeName&&(this.readonly?i.setAttribute("hidden",""):i.removeAttribute("hidden")),this.readonly&&!m(i)?i.readonly=!0:this.disabled?i.disabled=!0:i.addEventListener("input-valid",this.checkValidity)}))}}watchIdentifier(i){o(i)||console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${n(i)}.`)}validateRequiredMessage(i){if(i&&!f.includes(i))throw Error(`<mg-form> prop "requiredMessage" must be one of: ${f.join(", ")}. Passed value: ${n(i)}.`)}validateAriaRole(i){if(i&&!c.includes(i))throw Error(`<mg-form> prop "ariaRole" must be one of: ${c.join(", ")}. Passed value: ${n(i)}.`)}handlelabelOnTop(i){i?this.classCollection.add(this.classLabelOnTop):this.classCollection.delete(this.classLabelOnTop)}handleAttributeChange(){this.setMgInputs(),this.setRequiredMessage()}async displayError(){this.readonly||([...Array.from(this.element.querySelectorAll("*")).filter((i=>i.nodeName.startsWith("MG-FIELDSET"))),...this.mgInputs].forEach((i=>{var t;null===(t=i.displayError)||void 0===t||t.call(i)})),this.checkValidity())}async reset(){this.readonly||(await Promise.all(this.mgInputs.map((async i=>{void 0!==i.reset&&await i.reset()}))),this.checkValidity(),this.formReset.emit(!0))}componentWillLoad(){this.messages=d(this.element).messages,l(this),this.watchIdentifier(this.identifier),this.validateAriaRole(this.ariaRole),this.validateRequiredMessage(this.requiredMessage),this.handlelabelOnTop(this.labelOnTop),this.mgButtons=Array.from(this.element.querySelectorAll("mg-button")),this.mgButtons.forEach((i=>{i.setAttribute("form",this.identifier),"reset"===i.type&&i.addEventListener("click",(()=>{this.reset()}))})),this.setMgInputs(),Promise.all(this.mgInputs.map((async i=>{try{await i.componentOnReady()}catch(i){}}))).then((()=>{this.checkValidity()}))}componentDidLoad(){const i={childList:!0,subtree:!0};new MutationObserver((t=>{t.some((t=>Object.keys(i).includes(t.type)))&&(this.setMgInputs(),this.checkValidity())})).observe(this.element,i)}render(){return r("form",{key:"65d3e11931386af2dedd953f58505e2c71cd99ff",class:this.classCollection.join(),id:this.identifier,name:this.name,onSubmit:this.handleFormSubmit,role:this.ariaRole},this.requiredMessageText&&r("p",{key:"7546db3b8a4259fd7d092cc7b912b6593fab9d84",innerHTML:this.requiredMessageText}),r("slot",{key:"0023ed360230ea97395a249b230e02bb7a4bdbda"}),!this.readonly&&!this.disabled&&r("slot",{key:"de84e088ff029eff487be1ed8b4766425c558c29",name:"actions"}))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}static get style(){return".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}"}},[257,"mg-form",{identifier:[1],name:[1],readonly:[4],requiredMessage:[1,"required-message"],ariaRole:[1,"aria-role"],labelOnTop:[4,"label-on-top"],disabled:[4],valid:[1028],invalid:[1028],classCollection:[32],requiredMessageText:[32],displayError:[64],reset:[64]},void 0,{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-form"].forEach((t=>{"mg-form"===t&&(customElements.get(i(t))||customElements.define(i(t),u))}))}g();const b=u,p=g;export{b as MgForm,p as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as a}from"@stencil/core/internal/client";import{c as r,C as o,a as n,t as h}from"./index2.js";import{n as l}from"./index3.js";import{i as m}from"./index4.js";import{i as d}from"./mg-input.conf.js";const c=["form","search","none","presentation"],f=["default","hide"],g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.formValid=s(this,"form-valid",7),this.formSubmit=s(this,"form-submit",7),this.formReset=s(this,"form-reset",7),this.classAllRequired="mg-c-form--all-required",this.classLabelOnTop="mg-c-form--label-on-top",this.identifier=r("mg-form"),this.name=this.identifier,this.readonly=!1,this.labelOnTop=!1,this.disabled=!1,this.classCollection=new o(["mg-c-form"]),this.hasActions=!1,this.setRequiredMessage=()=>{if(this.requiredMessageText=null,this.classCollection.delete(this.classAllRequired),"hide"===this.requiredMessage)return;if("default"===this.requiredMessage)return void(this.requiredMessageText=this.messages.form.required);const t=t=>!(t.disabled||t.readonly),i=t=>"MG-INPUT-TOGGLE"===t.nodeName;if(!this.disabled&&!this.readonly&&this.mgInputs.some((e=>t(e)&&!i(e)))){const e=this.mgInputs.filter(t),s=e.filter((t=>!i(t)&&t.required));[s.length,e.length].every((t=>1===t))||s.length>1&&s.length===e.filter((t=>!i(t))).length?(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"allRequiredSingle","allRequired"),this.classCollection.add(this.classAllRequired)):s.length>0&&(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"requiredSingle","required"))}},this.getRequiredMessageBasedOnCount=(t,i,e)=>this.messages.form[1===t.length?i:e],this.checkValidity=()=>{this.setRequiredMessage(),this.valid=!this.mgInputs.some((t=>t.invalid)),this.invalid=!this.valid,this.formValid.emit(this.valid)},this.handleFormSubmit=t=>{t.preventDefault(),this.formSubmit.emit()},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((t=>{this.labelOnTop&&(t.labelOnTop=!0),"MG-INPUT-FILE"===t.nodeName&&(this.readonly?t.setAttribute("hidden",""):t.removeAttribute("hidden")),this.readonly&&!d(t)?t.readonly=!0:this.disabled?t.disabled=!0:t.addEventListener("input-valid",this.checkValidity)}))}}watchIdentifier(t){n(t)||console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${h(t)}.`)}validateRequiredMessage(t){if(t&&!f.includes(t))throw Error(`<mg-form> prop "requiredMessage" must be one of: ${f.join(", ")}. Passed value: ${h(t)}.`)}validateAriaRole(t){if(t&&!c.includes(t))throw Error(`<mg-form> prop "ariaRole" must be one of: ${c.join(", ")}. Passed value: ${h(t)}.`)}handlelabelOnTop(t){t?this.classCollection.add(this.classLabelOnTop):this.classCollection.delete(this.classLabelOnTop)}handleAttributeChange(){this.setMgInputs(),this.setRequiredMessage()}async displayError(){this.readonly||([...Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-FIELDSET"))),...this.mgInputs].forEach((t=>{var i;null===(i=t.displayError)||void 0===i||i.call(t)})),this.checkValidity())}async reset(){this.readonly||(await Promise.all(this.mgInputs.map((async t=>{void 0!==t.reset&&await t.reset()}))),this.checkValidity(),this.formReset.emit(!0))}componentWillLoad(){this.messages=m(this.element).messages,l(this),this.watchIdentifier(this.identifier),this.validateAriaRole(this.ariaRole),this.validateRequiredMessage(this.requiredMessage),this.handlelabelOnTop(this.labelOnTop),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.mgButtons=Array.from(this.element.querySelectorAll("mg-button")),this.mgButtons.forEach((t=>{t.setAttribute("form",this.identifier),"reset"===t.type&&t.addEventListener("click",(()=>{this.reset()}))})),this.setMgInputs(),Promise.all(this.mgInputs.map((async t=>{try{await t.componentOnReady()}catch(t){}}))).then((()=>{this.checkValidity()}))}componentDidLoad(){const t={childList:!0,subtree:!0};new MutationObserver((i=>{i.some((i=>Object.keys(t).includes(i.type)))&&(this.setMgInputs(),this.checkValidity(),this.hasActions=null!==this.element.querySelector('[slot="actions"]'))})).observe(this.element,t)}render(){return a("form",{key:"c851e6f19af32f28cad695daa1f42ddff10796a0",class:this.classCollection.join(),id:this.identifier,name:this.name,onSubmit:this.handleFormSubmit,role:this.ariaRole},this.requiredMessageText&&a("p",{key:"7f92b35872c938e87959acac8841937ad503d98f",innerHTML:this.requiredMessageText}),a("slot",{key:"e75e90f1fe3076d93df82a7a426b17d82035e0cf"}),!this.readonly&&!this.disabled&&this.hasActions&&a("div",{key:"a472cf024a61d6be1665d149749ce7d560a00473",class:"mg-c-form__actions"},a("slot",{key:"f9098c711cb2d2714057c4f14d6df295b75de774",name:"actions"})))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}static get style(){return".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32);--mg-c-form-inputs-field-offset:calc(var(--mg-c-input-title-width) + var(--mg-c-input-title-horizontal-space))}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-form-inputs-field-offset:0}.mg-c-form>p{font-size:var(--mg-b-font-size-small);margin-block-start:0}.mg-c-form ::slotted(*:last-child){--mg-c-input-margin-bottom:0}.mg-c-form__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mg-b-size-8)}::slotted(.mg-l-form-field-align){margin-block-end:var(--mg-c-input-margin-bottom);margin-inline-start:var(--mg-c-form-inputs-field-offset)}@media screen and (max-width: 767px){.mg-c-form{--mg-c-form-inputs-field-offset:0}}"}},[257,"mg-form",{identifier:[1],name:[1],readonly:[4],requiredMessage:[1,"required-message"],ariaRole:[1,"aria-role"],labelOnTop:[4,"label-on-top"],disabled:[4],valid:[1028],invalid:[1028],classCollection:[32],requiredMessageText:[32],hasActions:[32],displayError:[64],reset:[64]},void 0,{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-form"].forEach((i=>{"mg-form"===i&&(customElements.get(t(i))||customElements.define(t(i),g))}))}u();const p=g,b=u;export{p as MgForm,b as defineCustomElement}

package/dist/components/mg-illustrated-message.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as i}from"@stencil/core/internal/client";import{C as l,t as a,b as m}from"./index2.js";const r=["small","medium","large"],g=["vertical","horizontal"],c=["left","center","right"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",this.align="center",this.classCollection=new l(["mg-c-illustrated-message"])}watchSize(e,s){if(!r.includes(e))throw Error(`<mg-illustrated-message> prop "size" must be one of: ${r.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--size-"+s),this.classCollection.add("mg-c-illustrated-message--size-"+e)}watchDirection(e,s){if(void 0!==e&&!g.includes(e))throw Error(`<mg-illustrated-message> prop "direction" must be one of: ${g.join(", ")}. Passed value: ${a(e)}.`);"horizontal"===e?this.classCollection.add("mg-c-illustrated-message--direction-horizontal"):"horizontal"===s&&this.classCollection.delete("mg-c-illustrated-message--direction-horizontal")}watchAlign(e,s){if(!c.includes(e))throw Error(`<mg-illustrated-message> prop "align" must be one of: ${c.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--align-"+s),this.classCollection.add("mg-c-illustrated-message--align-"+e)}validateSlots(){const e=["h1","h2","h3","h4","h5","h6"],s=this.element.querySelector('[slot="title"]'),t=this.element.querySelectorAll('[slot="illustration"]');if(0===this.element.querySelectorAll('[slot="details"]').length&&null===s)throw Error('<mg-illustrated-message> Slot "title" or "details" must be present.');if(null!==s&&!m(s,e))throw Error(`<mg-illustrated-message> Slotted title must be a heading: ${e.join(", ")}.`);if(1!==t.length)throw Error("<mg-illustrated-message> Slotted illustration must be present and unique.");t[0].setAttribute("aria-hidden","true")}componentWillLoad(){this.watchDirection(this.direction),this.watchSize(this.size),this.watchAlign(this.align),this.validateSlots()}render(){return i("div",{key:"daffbfe09d4ccae7b2380d2dcd0f6157acf7a849",class:this.classCollection.join()},i("div",{key:"503631e106a43186d1031ebfd8bb5fa9e7aaa568",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"6291af5e6155e38e3cfb63acf3ca774e22d385f6",name:"illustration"})),i("div",{key:"7c7518be3413c7e9cadb149a255505d20525b6c7",class:"mg-c-illustrated-message__slots"},i("slot",{key:"742dc8a06f3f7ab06e4e67b370a750100585c384",name:"title"}),i("slot",{key:"3da2b7d35d1076d4cb87337f9a21e149c72f9141",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}}static get style(){return".mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{inline-size:fit-content;max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--align-left{margin-inline:0 auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-center{margin-inline:auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-right{margin-inline:auto 0}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}"}},[257,"mg-illustrated-message",{size:[1],direction:[1],align:[1],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}]);function n(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}n();const d=o,u=n;export{d as MgIllustratedMessage,u as defineCustomElement}
+import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as i}from"@stencil/core/internal/client";import{C as l,t as a,b as m}from"./index2.js";const r=["small","medium","large"],g=["vertical","horizontal"],c=["left","center","right"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",this.align="center",this.classCollection=new l(["mg-c-illustrated-message"])}watchSize(e,s){if(!r.includes(e))throw Error(`<mg-illustrated-message> prop "size" must be one of: ${r.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--size-"+s),this.classCollection.add("mg-c-illustrated-message--size-"+e)}watchDirection(e,s){if(void 0!==e&&!g.includes(e))throw Error(`<mg-illustrated-message> prop "direction" must be one of: ${g.join(", ")}. Passed value: ${a(e)}.`);"horizontal"===e?this.classCollection.add("mg-c-illustrated-message--direction-horizontal"):"horizontal"===s&&this.classCollection.delete("mg-c-illustrated-message--direction-horizontal")}watchAlign(e,s){if(!c.includes(e))throw Error(`<mg-illustrated-message> prop "align" must be one of: ${c.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--align-"+s),this.classCollection.add("mg-c-illustrated-message--align-"+e)}validateSlots(){const e=["h1","h2","h3","h4","h5","h6"],s=this.element.querySelector('[slot="title"]'),t=this.element.querySelectorAll('[slot="illustration"]');if(0===this.element.querySelectorAll('[slot="details"]').length&&null===s)throw Error('<mg-illustrated-message> Slot "title" or "details" must be present.');if(null!==s&&!m(s,e))throw Error(`<mg-illustrated-message> Slotted title must be a heading: ${e.join(", ")}.`);if(1!==t.length)throw Error("<mg-illustrated-message> Slotted illustration must be present and unique.");t[0].setAttribute("aria-hidden","true")}componentWillLoad(){this.watchDirection(this.direction),this.watchSize(this.size),this.watchAlign(this.align),this.validateSlots()}render(){return i("div",{key:"b914eadabb438b17c1cddc6b6e0167facf264a37",class:this.classCollection.join()},i("div",{key:"c2c55e775db2a622948ebd0d2efef8336520a52a",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"1b549999f75245d17d7c4ba5696af25921c1725a",name:"illustration"})),i("div",{key:"6f19510b6775bbd366dbb4127ad1ca7b1be8a261",class:"mg-c-illustrated-message__slots"},i("slot",{key:"db37d12c2812c8fca129f4d0f24cb011198ba474",name:"title"}),i("slot",{key:"2a1aaf4fe8ea18a971c741c03e05d146584567a7",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}}static get style(){return".mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{inline-size:fit-content;max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--align-left{margin-inline:0 auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-center{margin-inline:auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-right{margin-inline:auto 0}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}"}},[257,"mg-illustrated-message",{size:[1],direction:[1],align:[1],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}]);function n(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}n();const d=o,u=n;export{d as MgIllustratedMessage,u as defineCustomElement}