npm - @mgdis/mg-components - Versions diffs - 6.9.0 → 6.10.1 - Mend

@mgdis/mg-components 6.9.0 → 6.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/dist/components/mg-button2.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { k as kt, z as zt, L as Le, M as Mt } from './index.es.js';
+import { H as Ht, X as Xt, q as qe, Q as Qt } from './index.es.js';
+import { K as Keys } from './events.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 /**
@@ -57,7 +58,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         /**
          * Component classes
          */
-        this.classCollection = new kt(['mg-c-button']);
+        this.classCollection = new Ht(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -79,7 +80,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
             if (!this.disabled && event.key === ' ') {
                 event.preventDefault();
             }
-            else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
+            else if (!this.disabled && [Keys.ENTER, Keys.NUMPADENTER, Keys.SPACE].includes(event.key)) {
                 event.preventDefault();
                 this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
             }
@@ -115,7 +116,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
                 this.variant = variants[0];
                 return;
             }
-            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -127,7 +128,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     validateSize(newValue, oldValue) {
         // validate new value
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -169,7 +170,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     watchIsIcon(newValue) {
         if (newValue) {
             this.classCollection.add(`mg-c-button--icon`);
-            if (!Le(this.label)) {
+            if (!qe(this.label)) {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
@@ -200,7 +201,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      * Add listners
      */
     componentDidLoad() {
-        Mt(() => {
+        Qt(() => {
             var _a;
             const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
             // submit buttons should trigger form submition;
@@ -217,7 +218,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      */
     render() {
         var _a;
-        return (h(Host, { key: '73d97963f988261cec281f67842d71194513528b', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: 'c8ce88a3d9d67ce40cc9687b4ea192681d826896', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '5e8949fa49487deda3fdeb1fbb85b62d799e33c6', icon: "loader", spin: true }), h("div", { key: 'fc733614c9fb3e30c30c520e9ca3d8a4efd59efe', class: "mg-c-button__content" }, h("slot", { key: '1c2c5a91c44c8983d317a4f475ffe89fc21a36e5' })))));
+        return (h(Host, { key: '9cf0c234da7c2f0ca5ab1d6578fc1a00b7b6aa71', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: 'e4fc763ce10eb5958ebd9330f778380bb93100d6', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '6796487254b12a33339ac6b3a5f6c67000d8fe04', icon: "loader", spin: true }), h("div", { key: '469136ef8519825ebff3e6ee2bfe8c55e64a807d', class: "mg-c-button__content" }, h("slot", { key: 'eda514d71eaab7f7cf5cd3a65b64ffb6c9ed2e02' })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-button2.js","mappings":"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","names":["__stencil_proxyCustomElement","ClassList","toString","isValidString","nextTick"],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/*\n List of all possibles sizes\n /\nexport const sizes = ['medium', 'large'] as const;\n\n/\n SizeType type from button sizes\n /\nexport type SizeType = Size & (typeof sizes)[number];\n\n/\n List of all possibles variants\n /\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/\n VariantType type from button variants\n /\nexport type VariantType = Variant & (typeof variants)[number];\n\n/\n List of all possibles button types\n /\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/\n ButtonType type from buttonTypes\n /\nexport type ButtonType = (typeof buttonTypes)[number];\n","/!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n /:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .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{/!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n /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){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n /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){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n /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){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n /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){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n /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){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n /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){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n /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){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) - 2var(--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{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;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){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/# sourceMappingURL=mg-button.css.map /\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/*\n @slot - Button content\n /\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgButtonElement;\n\n /\n Define button variant\n /\n @Prop({ mutable: true }) variant: VariantType = 'primary';\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n // validate new value\n if (!variants.includes(newValue)) {\n if ((newValue as string) === '') {\n // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n this.variant = variants[0];\n return;\n }\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n }\n }\n\n /\n aria-label\n * In case button text is not explicit enough\n /\n @Prop() label?: string;\n\n /\n Define button type\n /\n @Prop() type?: ButtonType;\n\n /\n Define button size\n /\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n // validate new value\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n this.setIconSize();\n }\n }\n\n /\n Set button to full-width\n /\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /\n Define form id to attach button with.\n * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n /\n @Prop() form?: string;\n\n /\n Disable button\n /\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /\n Define if button is round.\n * Used for icon button.\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon[size]')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon(this.isIcon);\n\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-button2.js","mappings":"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","names":["__stencil_proxyCustomElement","ClassList","toString","isValidString","nextTick"],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/*\n List of all possibles sizes\n /\nexport const sizes = ['medium', 'large'] as const;\n\n/\n SizeType type from button sizes\n /\nexport type SizeType = Size & (typeof sizes)[number];\n\n/\n List of all possibles variants\n /\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/\n VariantType type from button variants\n /\nexport type VariantType = Variant & (typeof variants)[number];\n\n/\n List of all possibles button types\n /\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/\n ButtonType type from buttonTypes\n /\nexport type ButtonType = (typeof buttonTypes)[number];\n","/!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n /:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .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{/!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n /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){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n /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){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n /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){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n /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){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n /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){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n /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){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n /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){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) - 2var(--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{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;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){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/# sourceMappingURL=mg-button.css.map /\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { Keys } from '../../../utils/events.utils';\n\n/*\n @slot - Button content\n /\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgButtonElement;\n\n /\n Define button variant\n /\n @Prop({ mutable: true }) variant: VariantType = 'primary';\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n // validate new value\n if (!variants.includes(newValue)) {\n if ((newValue as string) === '') {\n // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n this.variant = variants[0];\n return;\n }\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n }\n }\n\n /\n aria-label\n * In case button text is not explicit enough\n /\n @Prop() label?: string;\n\n /\n Define button type\n /\n @Prop() type?: ButtonType;\n\n /\n Define button size\n /\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n // validate new value\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n this.setIconSize();\n }\n }\n\n /\n Set button to full-width\n /\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /\n Define form id to attach button with.\n * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n /\n @Prop() form?: string;\n\n /\n Disable button\n /\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /\n Define if button is round.\n * Used for icon button.\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && [Keys.ENTER, Keys.NUMPADENTER, Keys.SPACE].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon[size]')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon(this.isIcon);\n\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-character-left2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { O as Ot, z as zt } from './index.es.js';
+import { D as Dt, X as Xt } from './index.es.js';
 const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{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}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
@@ -14,13 +14,13 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
         this.characters = '';
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !Ot(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
+        if (newValue !== undefined && !Dt(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Xt(newValue)}.`);
         }
     }
     /*************

package/dist/components/mg-details.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { L as Le } from './index.es.js';
+import { q as qe } from './index.es.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
-const mgDetailsCss = ".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}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.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__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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
+const mgDetailsCss = ".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}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.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__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__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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
     constructor() {
@@ -26,7 +26,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
         };
     }
     validateTitles(newValue) {
-        if (!Le(newValue)) {
+        if (!qe(newValue)) {
             throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
         }
     }
@@ -53,7 +53,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '3f773b6c0d10c12049d62a9bbe3b24ce95329077', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'c6378c290a253098a26e832dbc43c58182e1d90c' }, h("slot", { key: '033334926172ca422a1346085cfe5fb1adf33e9b', name: "summary" }), h("span", { key: '105cd284d2cf7363cd0ea85279c057471f2113c9', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'c17df4c2813a346a4ced9be2f872dcdc688baa2e', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '5dc2078f2ba8808dbad0b75f2857173d2bd8d3e5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'bf9883ad6dbf0c1014ad6559cb5d08b157d80d9b', class: "mg-c-details__details" }, h("slot", { key: '244092eb1aceb39143e53b63faf36ab2a5c4c205', name: "details" }))));
+        return (h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-details.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,~~22CAA22C~~;;~~MCYn3CA~~,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;;AAyCE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAWzC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAW;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AACnC,SAAC;AAuCF;AAvEC,IAAA,cAAc,CAAC,QAAgB,EAAA;AAC7B,QAAA,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;AAC5B,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,yHAAA,EAA4H,IAAI,CAAC,YAAY,CAAA,sBAAA,EAAyB,IAAI,CAAC,YAAY,CAAA,GAAA,CAAK,CAC7L;;;AAcL,IAAA,cAAc,CAAC,QAAiB,EAAA;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAepC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;AACtC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QACtC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C,KAAI;YACrF,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC,KAAK,IAAI,EAAE;gBAC1F,KAAK,CAAC,cAAc,EAAE;;AAE1B,SAAC,CAAC;;AAGJ;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAA,EAClI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAY,CAAA,EACzI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,EAAG,EAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","__stencil_proxyCustomElement","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".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}}/!\n @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n /.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.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__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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}/# sourceMappingURL=mg-details.css.map /\n","import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/*\n @slot summary - Summary content\n * @slot details - Details content\n /\n@Component({\n tag: 'mg-details',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n shadow: true,\n})\nexport class MgDetails {\n /**********\n Internal \n *********/\n\n // HTML selector\n private details: HTMLDetailsElement;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgDetailsElement;\n\n /\n Displayed title when details are closed\n /\n @Prop() toggleClosed!: string;\n\n /\n Displayed title when details are opened\n /\n @Prop() toggleOpened!: string;\n @Watch('toggleClosed')\n @Watch('toggleOpened')\n validateTitles(newValue: string): void {\n if (!isValidString(newValue)) {\n throw new Error(\n `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n );\n }\n }\n\n /\n Hide summary element\n /\n @Prop() hideSummary = false;\n\n /\n Define if details are diplayed\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n /\n Handle details toggle\n /\n private handleToggle = (): void => {\n this.expanded = this.details.open;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.validateTitles(this.toggleClosed);\n this.validateTitles(this.toggleOpened);\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]') !== null) {\n event.preventDefault();\n }\n });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary>\n <slot name=\"summary\"></slot>\n <span class=\"mg-c-details__toggle\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n </span>\n </summary>\n <div class=\"mg-c-details__details\">\n <slot name=\"details\"></slot>\n </div>\n </details>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,k3CAAk3C;;MCY13CA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;;AAyCE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAWzC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAW;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AACnC,SAAC;AAuCF;AAvEC,IAAA,cAAc,CAAC,QAAgB,EAAA;AAC7B,QAAA,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;AAC5B,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,yHAAA,EAA4H,IAAI,CAAC,YAAY,CAAA,sBAAA,EAAyB,IAAI,CAAC,YAAY,CAAA,GAAA,CAAK,CAC7L;;;AAcL,IAAA,cAAc,CAAC,QAAiB,EAAA;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAepC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;AACtC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QACtC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C,KAAI;YACrF,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC,KAAK,IAAI,EAAE;gBAC1F,KAAK,CAAC,cAAc,EAAE;;AAE1B,SAAC,CAAC;;AAGJ;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAA,EAClI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAY,CAAA,EACzI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,EAAG,EAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","__stencil_proxyCustomElement","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".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}}/!\n @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n /.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__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__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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}/# sourceMappingURL=mg-details.css.map /\n","import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/*\n @slot summary - Summary content\n * @slot details - Details content\n /\n@Component({\n tag: 'mg-details',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n shadow: true,\n})\nexport class MgDetails {\n /**********\n Internal \n *********/\n\n // HTML selector\n private details: HTMLDetailsElement;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgDetailsElement;\n\n /\n Displayed title when details are closed\n /\n @Prop() toggleClosed!: string;\n\n /\n Displayed title when details are opened\n /\n @Prop() toggleOpened!: string;\n @Watch('toggleClosed')\n @Watch('toggleOpened')\n validateTitles(newValue: string): void {\n if (!isValidString(newValue)) {\n throw new Error(\n `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n );\n }\n }\n\n /\n Hide summary element\n /\n @Prop() hideSummary = false;\n\n /\n Define if details are diplayed\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n /\n Handle details toggle\n /\n private handleToggle = (): void => {\n this.expanded = this.details.open;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.validateTitles(this.toggleClosed);\n this.validateTitles(this.toggleOpened);\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]') !== null) {\n event.preventDefault();\n }\n });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary>\n <slot name=\"summary\"></slot>\n <span class=\"mg-c-details__toggle\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n </span>\n </summary>\n <div class=\"mg-c-details__details\">\n <slot name=\"details\"></slot>\n </div>\n </details>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-form.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { x as xt, k as kt, O as Ot, z as zt } from './index.es.js';
+import { Z as Zt, H as Ht, D as Dt, X as Xt } from './index.es.js';
 import { i as initLocales } from './index2.js';
 /**
@@ -27,7 +27,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = xt('mg-form');
+        this.identifier = Zt('mg-form');
         /**
          * Input name
          * If not set the value equals the identifier
@@ -48,7 +48,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         /**
          * Component classes
          */
-        this.classCollection = new kt(['mg-c-form']);
+        this.classCollection = new Ht(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -136,18 +136,18 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         };
     }
     watchIdentifier(newValue) {
-        if (!Ot(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
+        if (!Dt(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -236,7 +236,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '43c060c027330a9db84c469228536db8d2329c86', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '42cba44f2075371ae73b097b84012fdbd1b473d8', innerHTML: this.requiredMessageText }), h("slot", { key: '0797165b78e980ab2680f7a3a1c68b13c5140820' }), !this.readonly && !this.disabled && h("slot", { key: 'a13f2ac1e784b0e03408ed811b1c3bec4b730479', name: "actions" })));
+        return (h("form", { key: '444703cae8a5374a86adc1dcaf048665f06e795f', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '1a936dfeb41a257be7b44afada7bd435f9a357f0', innerHTML: this.requiredMessageText }), h("slot", { key: 'a446094e8658b02c5a9baf7b19d77ca11b1432e9' }), !this.readonly && !this.disabled && h("slot", { key: '41f4e1c80a0f78b112eaac1d5bc53a219eee926e', name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-icon2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { k as kt, z as zt } from './index.es.js';
+import { H as Ht, X as Xt } from './index.es.js';
 /**
  * List of all possibles sizes
@@ -34,7 +34,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
         /**
          * Component classes
          */
-        this.classCollection = new kt(['mg-c-icon']);
+        this.classCollection = new Ht(['mg-c-icon']);
         /**
          * Method to set default varianStyle props
          * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -65,7 +65,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue)) {
-            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -81,7 +81,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
             newValue = 'medium';
         }
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -93,7 +93,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
     validateVariant(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variants.includes(newValue))
-                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${zt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Xt(newValue)}.`);
             else {
                 this.setDefaultVariantStyle();
                 if (oldValue !== undefined)
@@ -105,7 +105,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
     validateVariantStyle(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variantStyles.includes(newValue))
-                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${zt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Xt(newValue)}.`);
             else {
                 if (oldValue !== undefined)
                     this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { k as kt, z as zt, T as Tt } from './index.es.js';
+import { H as Ht, X as Xt, B as Bt } from './index.es.js';
 /**
  * List of all possibles sizes
@@ -28,11 +28,11 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         /**
          * Component classes
          */
-        this.classCollection = new kt(['mg-c-illustrated-message']);
+        this.classCollection = new Ht(['mg-c-illustrated-message']);
     }
     watchSize(newValue, oldValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -43,7 +43,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
     }
     watchDirection(newValue, oldValue) {
         if (newValue !== undefined && !directions.includes(newValue)) {
-            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else if (newValue === 'horizontal') {
             this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
@@ -66,7 +66,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         if (slottedDetails.length === 0 && slottedTitle === null) {
             throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
         }
-        else if (slottedTitle !== null && !Tt(slottedTitle, headingTags)) {
+        else if (slottedTitle !== null && !Bt(slottedTitle, headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -90,7 +90,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '2149de3930476c30fa95c8b117076751fff95029', class: this.classCollection.join() }, h("div", { key: '2795cb4895296c33b0aaf2ff8b2dcda464ce7f60', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'fd9f3c1fbcd10bf220d6dd527bf5a8485c505078', name: "illustration" })), h("div", { key: '1acf58c99a54bc100b98ca4bf37ef4fd32242a5f', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'a1945bb8898198066958f06082e27c6fe3c26153', name: "title" }), h("slot", { key: '97b69594078389495397985e8ccb1e5e0dd4bc3f', name: "details" }))));
+        return (h("div", { key: '60c53ef4294aa36a8c354b42f47f5c7d9fc409f6', class: this.classCollection.join() }, h("div", { key: '254673ae5b7183a1adfa53c18d9e632bcdd67607', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '16b9bbe8abaae4d0f7b713fbe345e54b5b966ac0', name: "illustration" })), h("div", { key: 'c272c168ea520f8c71261e8f84297fb1bd44c044', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '7ba11d5f5fe293175a01768619bc43b0632ba0a5', name: "title" }), h("slot", { key: 'f03540939af486bb44134298b12eaf9de32f814a', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-input-checkbox.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { k as kt, a as Lt, L as Le, z as zt } from './index.es.js';
+import { H as Ht, Y as Yt, q as qe, X as Xt } from './index.es.js';
 import { d as defineCustomElement$a, S as SectionKind, a as MgInputCheckboxList, c as checkboxTypes } from './mg-input-checkbox-paginated2.js';
 import { d as defineCustomElement$b, b as classFieldset, e as classVerticalList, c as classReadonly, a as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
@@ -86,7 +86,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         /**
          * Component classes
          */
-        this.classCollection = new kt([this.baseClassName, classFieldset]);
+        this.classCollection = new Ht([this.baseClassName, classFieldset]);
         /**
          * Formated value to display in list
          */
@@ -204,7 +204,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => Lt(item.title).includes(Lt(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Yt(item.title).includes(Yt(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -236,13 +236,13 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * @returns message to display
          */
         this.getSelectValuesButtonMessage = () => {
-            if (this.selectValuesButtonKey === 'editButton' && Le(this.editButtonMessage)) {
+            if (this.selectValuesButtonKey === 'editButton' && qe(this.editButtonMessage)) {
                 return this.editButtonMessage;
             }
-            else if (this.selectValuesButtonKey === 'showButton' && Le(this.showButtonMessage)) {
+            else if (this.selectValuesButtonKey === 'showButton' && qe(this.showButtonMessage)) {
                 return this.showButtonMessage;
             }
-            else if (this.selectValuesButtonKey === 'selectButton' && Le(this.selectButtonMessage)) {
+            else if (this.selectValuesButtonKey === 'selectButton' && qe(this.selectButtonMessage)) {
                 return this.selectButtonMessage;
             }
             else {
@@ -298,12 +298,12 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Xt(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${zt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Xt(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';
@@ -403,7 +403,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!Le(errorMessage)) {
+        else if (!qe(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
         }
         else {

package/dist/components/mg-input-combobox.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface MgInputCombobox extends Components.MgInputCombobox, HTMLElement {}
+export const MgInputCombobox: {
+    prototype: MgInputCombobox;
+    new (): MgInputCombobox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;