@mgdis/mg-components 6.3.0 → 6.5.0

package/dist/components/mg-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { X as Xe, Y as Ye, m as me, t as tt } from './index.es.js';
+import { K as Ke, V as Ve, m as me, s as st } from './index.es.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 /**
@@ -27,6 +27,38 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         this.classDisabled = 'mg-c-button--disabled';
         this.classLoading = 'mg-c-button--loading';
         this.classFullWidth = 'mg-c-button--full-width';
+        /**
+         * Define button variant
+         */
+        this.variant = variants[0]; // Primary
+        /**
+         * Define button size
+         */
+        this.size = sizes[0]; // medium
+        /**
+         * Set button to full-width
+         */
+        this.fullWidth = false;
+        /**
+         * Define if button is round.
+         * Used for icon button.
+         */
+        this.isIcon = false;
+        /**
+         * Option to set input disable on click, in order to prevent multi-click.
+         * Parent component have to remove the attribute 'disabled' when the process ends.
+         */
+        this.disableOnClick = false;
+        /**
+         * Define if button is loading, default to false.
+         * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+         * It's required to reset to false when action/promise in parent is done to stop the loading state
+         */
+        this.loading = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ke(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -75,17 +107,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
             }
         };
-        this.variant = variants[0];
-        this.label = undefined;
-        this.type = undefined;
-        this.size = sizes[0];
-        this.fullWidth = false;
-        this.form = undefined;
-        this.disabled = undefined;
-        this.isIcon = false;
-        this.disableOnClick = false;
-        this.loading = false;
-        this.classCollection = new Xe(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
         // validate new value
@@ -95,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: ${Ye(newValue)}.`);
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Ve(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -107,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: ${Ye(newValue)}.`);
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ve(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -180,7 +201,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      * Add listners
      */
     componentDidLoad() {
-        tt(() => {
+        st(() => {
             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;

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

@@ -1 +1 @@
-{"file":"mg-button2.js","mappings":"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","names":["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) - 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{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 = variants[0]; // 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 = sizes[0]; // 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(): void {\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')?.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();\n    if (this.isIcon) {\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    // 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}
+{"file":"mg-button2.js","mappings":"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","names":["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) - 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{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 = variants[0]; // 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 = sizes[0]; // 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(): void {\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')?.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();\n    if (this.isIcon) {\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    // 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-card2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
 const MgCardStyle0 = mgCardCss;
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
@@ -17,7 +17,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
+        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
     }
     static get style() { return MgCardStyle0; }
 }, [1, "mg-card"]);

package/dist/components/mg-card2.js.map

@@ -1 +1 @@
-{"file":"mg-card2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,guFAAguF,CAAC;AACnvF,qBAAe,SAAS;;MCSX,MAAM;;;;;;;;;;;;;IASjB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-card.css.map */\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot - Card content\n */\n@Component({\n  tag: 'mg-card',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-card\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-card2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kwFAAkwF,CAAC;AACrxF,qBAAe,SAAS;;MCSX,MAAM;;;;;;;;;;;;;IASjB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-card.css.map */\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot - Card content\n */\n@Component({\n  tag: 'mg-card',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-card\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { G as Ge, Y as Ye } from './index.es.js';
+import { X as Xe, V as Ve } 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}";
 const MgCharacterLeftStyle0 = mgCharacterLeftCss;
@@ -9,18 +9,19 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
     constructor() {
         super();
         this.__registerHost();
-        this.identifier = undefined;
+        /**
+         * Sets the characters to count
+         */
         this.characters = '';
-        this.maxlength = undefined;
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !Ge(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (newValue !== undefined && !Xe(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Ve(newValue)}.`);
         }
     }
     /*************
@@ -39,7 +40,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '2b0d8d920df6ec866670736d3ab0c686668befd8', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'd620461fe31ae8845a497b0601be71b3347613db', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '20b5e5624aaec2cb6b5cb73bc111dff351666521', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: '38d0a5617735f7f451d8f07f7e4840ccc2539d6b', id: this.identifier, "aria-live": "polite" }, h("span", { key: '382dc20170c5285afdc0c73a76f5797703ffdf9a', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '8f57b75c08c3da4353f194dc174dff4a3f7e06e4', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-character-left2.js.map

@@ -1 +1 @@
-{"file":"mg-character-left2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,0iBAA0iB,CAAC;AACtkB,8BAAe,kBAAkB;;MCWpB,eAAe;;;;;0BA+BL,EAAE;;;IATvB,eAAe,CAAC,QAAuC;QACrD,IAAI,QAAQ,KAAK,SAAS,IAAI,CAACA,EAAU,CAAC,QAAQ,CAAC,EAAE;YACnD,OAAO,CAAC,KAAK,CAAC,yEAAyEC,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAC/G;KACF;IAYD,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,wFAAwFA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAChI;KACF;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,4EAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValideID","toString"],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/internals/mg-character-left/mg-character-left.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}}mg-character-left{display:block}/*# sourceMappingURL=mg-character-left.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../../locales';\nimport { isValideID, toString } from '@mgdis/stencil-helpers';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier?: string;\n  @Watch('identifier')\n  watchIdentifier(newValue: MgCharacterLeft['identifier']): void {\n    if (newValue !== undefined && !isValideID(newValue)) {\n      console.error(`<mg-character-left> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error(`<mg-character-left> prop \"maxlength\" is required and must be a number. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.watchIdentifier(this.identifier);\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-character-left2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,0iBAA0iB,CAAC;AACtkB,8BAAe,kBAAkB;;MCWpB,eAAe;IAL5B;;;;;;QAoCU,eAAU,GAAG,EAAE,CAAC;KAwCzB;IAjDC,eAAe,CAAC,QAAuC;QACrD,IAAI,QAAQ,KAAK,SAAS,IAAI,CAACA,EAAU,CAAC,QAAQ,CAAC,EAAE;YACnD,OAAO,CAAC,KAAK,CAAC,yEAAyEC,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAC/G;KACF;IAYD,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,wFAAwFA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAChI;KACF;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,4EAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValideID","toString"],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/internals/mg-character-left/mg-character-left.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}}mg-character-left{display:block}/*# sourceMappingURL=mg-character-left.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../../locales';\nimport { isValideID, toString } from '@mgdis/stencil-helpers';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier?: string;\n  @Watch('identifier')\n  watchIdentifier(newValue: MgCharacterLeft['identifier']): void {\n    if (newValue !== undefined && !isValideID(newValue)) {\n      console.error(`<mg-character-left> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error(`<mg-character-left> prop \"maxlength\" is required and must be a number. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.watchIdentifier(this.identifier);\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-details.js

@@ -11,16 +11,20 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Hide summary element
+         */
+        this.hideSummary = false;
+        /**
+         * Define if details are diplayed
+         */
+        this.expanded = false;
         /**
          * Handle details toggle
          */
         this.handleToggle = () => {
             this.expanded = this.details.open;
         };
-        this.toggleClosed = undefined;
-        this.toggleOpened = undefined;
-        this.hideSummary = false;
-        this.expanded = false;
     }
     validateTitles(newValue) {
         if (!me(newValue)) {
@@ -39,14 +43,19 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
     componentWillLoad() {
         this.validateTitles(this.toggleClosed);
         this.validateTitles(this.toggleOpened);
+        this.element.addEventListener('click', (event) => {
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
+                event.preventDefault();
+        });
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'd9bd05ca12f405dd25dda244ec0260691d340223', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2b7893cc0c54d94981d6500776eb22723e1fb5f2' }, h("slot", { key: '714054624ffc1b6b7261edd166bfd16a256e06ce', name: "summary" }), h("span", { key: 'a257d98ed1e8243eae76d259b09bf7fabbfa66e0', class: "mg-c-details__toggle" }, h("mg-icon", { key: '7afafc9c038cbb0d3b984564973776313b9c65c4', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'adaaa789315e3c70073087cce6e7ff2136786a38', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '466d0637025066728de423fc8cc3fa6e49dca70b', class: "mg-c-details__details" }, h("slot", { key: '2f4747fd80523a949f9bc55dab3ebbb5756aad24', name: "details" }))));
+        return (h("details", { key: '851050eb7f2c7128626807b429d1a4ddd24fac6c', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '4f7b30959879ca3ec02bd8a0ed9c9df10b7904eb' }, h("slot", { key: '0a8485488fe0f6c5dc7f2bd4b4f2c19de5300178', name: "summary" }), h("span", { key: 'b4a2a3200acc6519df531aba4f45aab34695064d', class: "mg-c-details__toggle" }, h("mg-icon", { key: '24b61c43ac8493474bdbe4575fe0354f6620232f', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '215e2f7044d164225749bead2e0b63f1818529d8', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '0da538ad71a452d0f923c8c027f4ea7ba1781985', class: "mg-c-details__details" }, h("slot", { key: 'c278af232c685e7c8b40ac6c9d956d12a944795f', name: "details" }))));
     }
+    get element() { return this; }
     static get watchers() { return {
         "toggleClosed": ["validateTitles"],
         "toggleOpened": ["validateTitles"],

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

@@ -1 +1 @@
-{"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,22CAA22C,CAAC;AACj4C,wBAAe,YAAY;;MCWdA,WAAS;;;;;;;;;QAqDZ,iBAAY,GAAG;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;SACnC,CAAC;;;2BArBoB,KAAK;wBAKS,KAAK;;IAhBzC,cAAc,CAAC,QAAgB;QAC7B,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CACb,4HAA4H,IAAI,CAAC,YAAY,yBAAyB,IAAI,CAAC,YAAY,KAAK,CAC7L,CAAC;SACH;KACF;IAYD,cAAc,CAAC,QAAiB;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;IAqBD,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACxC;;;;;IAMD,MAAM;QACJ,QACE,gEAAS,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,IAClI,kEACE,6DAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,6DAAM,KAAK,EAAC,sBAAsB,IAChC,gEAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACzI,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","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 } 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   * 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  }\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}
+{"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,22CAA22C,CAAC;AACj4C,wBAAe,YAAY;;MCWdA,WAAS;IALtB;;;;;;;;QA4CU,gBAAW,GAAG,KAAK,CAAC;;;;QAKH,aAAQ,GAAG,KAAK,CAAC;;;;QAclC,iBAAY,GAAG;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;SACnC,CAAC;KAqCH;IArEC,cAAc,CAAC,QAAgB;QAC7B,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CACb,4HAA4H,IAAI,CAAC,YAAY,yBAAyB,IAAI,CAAC,YAAY,KAAK,CAC7L,CAAC;SACH;KACF;IAYD,cAAc,CAAC,QAAiB;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;IAqBD,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAyC;YAC/E,IAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1G,CAAC,CAAA;KACH;;;;;IAMD,MAAM;QACJ,QACE,gEAAS,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,IAClI,kEACE,6DAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,6DAAM,KAAK,EAAC,sBAAsB,IAChC,gEAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACzI,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","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\"]')) event.preventDefault();\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-divider2.js

@@ -8,6 +8,12 @@ const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLE
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**************
+         * Decorators *
+         **************/
+        /**
+         * Define component size
+         */
         this.fullWidth = false;
     }
     /**
@@ -15,7 +21,7 @@ const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
+        return (h("div", { key: '60b987cb329c6db14c2cc4a665e7f32b2696a3ee', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full-width': this.fullWidth,
             } }));

package/dist/components/mg-divider2.js.map

@@ -1 +1 @@
-{"file":"mg-divider2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ipBAAipB,CAAC;AACvqB,wBAAe,YAAY;;MCMd,SAAS;;;;;yBAQA,KAAK;;;;;;IAMzB,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-divider.css?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-divider-color-background: Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`.\n * @prop --mg-c-divider-thickness: Defines the thickness of the divider. The default value is `--mg-b-size-border`.\n * @prop --mg-c-divider-spacing-vertical: Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`.\n */.mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}/*# sourceMappingURL=mg-divider.css.map */\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n  shadow: true,\n})\nexport class MgDivider {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define component size\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-divider': true,\n          'mg-c-divider--full-width': this.fullWidth,\n        }}\n      ></div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-divider2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ipBAAipB,CAAC;AACvqB,wBAAe,YAAY;;MCMd,SAAS;IALtB;;;;;;;;;;QAaU,cAAS,GAAG,KAAK,CAAC;KAgB3B;;;;;IAVC,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-divider.css?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-divider-color-background: Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`.\n * @prop --mg-c-divider-thickness: Defines the thickness of the divider. The default value is `--mg-b-size-border`.\n * @prop --mg-c-divider-spacing-vertical: Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`.\n */.mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}/*# sourceMappingURL=mg-divider.css.map */\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n  shadow: true,\n})\nexport class MgDivider {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define component size\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-divider': true,\n          'mg-c-divider--full-width': this.fullWidth,\n        }}\n      ></div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-form.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { q as qe, X as Xe, G as Ge, Y as Ye } from './index.es.js';
+import { G as Ge, K as Ke, X as Xe, V as Ve } from './index.es.js';
 import { i as initLocales } from './index2.js';
 
 /**
@@ -24,6 +24,28 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         // Classes
         this.classAllRequired = 'mg-c-form--all-required';
         this.classLabelOnTop = 'mg-c-form--label-on-top';
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = Ge('mg-form');
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if form is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if form is disabled
+         */
+        this.disabled = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ke(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -109,31 +131,20 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
                 }
             });
         };
-        this.identifier = qe('mg-form');
-        this.name = this.identifier;
-        this.readonly = false;
-        this.requiredMessage = undefined;
-        this.ariaRole = undefined;
-        this.labelOnTop = undefined;
-        this.disabled = false;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-form']);
-        this.requiredMessageText = undefined;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Xe(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Ve(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Ve(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -209,17 +220,20 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      */
     componentDidLoad() {
         // Update mgInputs when mgForm content change
-        new MutationObserver(() => {
-            this.setMgInputs();
-            this.checkValidity();
-        }).observe(this.element, { childList: true });
+        const observerOptions = { childList: true, subtree: true };
+        new MutationObserver((mutations) => {
+            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
+                this.setMgInputs();
+                this.checkValidity();
+            }
+        }).observe(this.element, observerOptions);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'ecfaff2bb897ce2c48ed352167bb418703a56c98', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '4d4fa2ff3cf4f25ebe0b009ae1995734bfcafd3b', innerHTML: this.requiredMessageText }), h("slot", { key: 'dc0c7acadf6b744335852f847a8336b018e28cb5' }), !this.readonly && !this.disabled && h("slot", { key: 'ede3ace32f6a88067845013fa65e5414cae5fcea', name: "actions" })));
+        return (h("form", { key: 'e61304b43787fba050014fd223f82e36aa76a133', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '4ff8cc35336c0943584b717c6c5717fb517b4301', innerHTML: this.requiredMessageText }), h("slot", { key: '214cbf3473b2bb00534b315e4faae164e07a14a4' }), !this.readonly && !this.disabled && h("slot", { key: 'db314dd5d606da7dc5fce4c8663f4064586b34be', name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {