@mgdis/mg-components 5.28.2 → 6.0.0

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

@@ -0,0 +1 @@
+{"file":"mg-message2.js","mappings":"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","names":["ClassList","toString"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","../styles/dist/components/mg-message.css?tag=mg-message&encapsulation=shadow","src/components/molecules/mg-message/mg-message.tsx"],"sourcesContent":["import type { Variant, VariantStyle } from '../../../types';\n\n/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'background'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = VariantStyle & (typeof variantStyles)[number];\n","/*!\n * @prop --mg-c-message-border-radius: Defines the border radius of the message. Default value: `--mg-b-size-radius`.\n */:host{--mg-c-card-spacing: 0;--mg-c-card-border-radius: var(--mg-c-message-border-radius);--mg-c-card-border: none;--mg-c-card-overflow: hidden}.mg-c-message{display:inline-block;min-height:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background: var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background: var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background: var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background: var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);left:calc(var(--mg-b-size-4) + var(--mg-b-size-8));line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 var(--mg-b-size-8) 0 calc(var(--mg-b-size-4) + var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8));place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;width:var(--mg-b-size-40);height:0}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:right}.mg-c-message__bar{position:absolute;top:0;left:0;width:var(--mg-b-size-4);height:100%}.mg-c-message ::slotted(*){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}/*# sourceMappingURL=mg-message.css.map */\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-message.conf';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * @slot - Message content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  private readonly classBase = 'mg-c-message';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\n\n  /**\n   * Define variant\n   */\n  @Prop() variant: VariantType = 'info';\n  @Watch('variant')\n  watchVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n      if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n    }\n  }\n\n  /**\n   * Define variant style\n   */\n  @Prop() variantStyle: VariantStyleType = 'bar-left';\n  @Watch('variantStyle')\n  watchVariantStyle(newValue: MgMessage['variantStyle'], oldValue?: MgMessage['variantStyle']): void {\n    if (!variantStyles.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n      if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Validate\n    this.watchVariant(this.variant);\n    this.watchVariantStyle(this.variantStyle);\n    // Check if component has actions slot\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <mg-card>\n          {this.variantStyle === 'bar-left' && <span class=\"mg-c-message__bar\"></span>}\n          <span class=\"mg-c-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-c-message__content\">\n            <span class=\"mg-c-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && [\n              <span class=\"mg-c-message__content-separator\" key=\"content-separator\"></span>,\n              <span class=\"mg-c-message__content-actions-slot\" key=\"content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>,\n            ]}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-modal.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { K as Ke, z as ze, I as Ie, Z as Ze } from './index.es.js';
+import { z as ze, I as Ie, Z as Ze, Q as Qe } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const dialogRoles = ['dialog', 'alertdialog'];
 
-const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{padding:1rem;margin:-1rem;overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
+const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*){--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 MgModalStyle0 = mgModalCss;
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
@@ -20,116 +20,44 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         this.__attachShadow();
         this.componentShow = createEvent(this, "component-show", 7);
         this.componentHide = createEvent(this, "component-hide", 7);
-        /************
-         * Internal *
-         ************/
-        // Modal focusable elements
-        this.modalFocusableElements = [];
-        // Classes
-        this.classHide = 'mg-c-modal--hide';
         // IDs
         this.titleId = '';
+        /***********
+         * Handles *
+         ***********/
         /**
-         * Handle last focusable element
-         * @param event - keyboard event
-         */
-        this.handleLastFocusableElement = (event) => {
-            if (event.key === 'Tab' && !event.shiftKey) {
-                event.preventDefault();
-                this.modalFocusableElements[0].focus();
-            }
-        };
-        /**
-         * Handle first focusable element
-         * @param event - keyboard event
-         */
-        this.handleFirstFocusableElement = (event) => {
-            if (event.key === 'Tab' && event.shiftKey) {
-                event.preventDefault();
-                this.getLastFocusableElement().focus();
-            }
-        };
-        /**
-         * Get last focusablmeElement
-         * @returns last modal focusable element
-         */
-        this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
-        /**
-         * Method to manage focus on modal focusable elements
-         */
-        this.setFocus = () => {
-            // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(Ke));
-            // If close button is enabled or at least one of the slotted element is focusable
-            if (this.closeButton || slottedFocusableElements.length > 0) {
-                // Check if slotted focusable elements have shadowDom with focusable elements
-                this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
-                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(Ke) || focusableElement : focusableElement);
-                    return acc;
-                }, []);
-                // When close button is enabled it's the first focusable element.
-                if (this.closeButton && this.closeButtonElement !== undefined) {
-                    this.modalFocusableElements.unshift(this.closeButtonElement);
-                }
-                // Add event listener on last element
-                this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
-                // Add event listener on first element (case shift + tab)
-                this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
-            }
-        };
-        /*************
-         * Handlers *
-         *************/
-        /**
-         * Handle close button
+         * Closes the modal.
          */
         this.handleClose = () => {
-            this.hide = true;
+            this.open = false;
         };
         this.identifier = ze('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
-        this.hide = undefined;
+        this.open = false;
         this.hasActions = false;
-        this.hasContent = false;
         this.classCollection = new Ie(['mg-c-modal']);
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Ze(newValue)}.`);
     }
     validateModalTitle(newValue) {
-        if (!Ze(newValue)) {
-            throw new Error('<mg-modal> prop "modalTitle" is required.');
+        if (!Qe(newValue)) {
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Ze(newValue)}.`);
         }
     }
-    validateHide(newValue) {
-        var _a;
+    watchOpen(newValue) {
         if (newValue) {
-            this.componentHide.emit();
-            this.classCollection.add(this.classHide);
-            document.body.style.overflow = this.bodyOverflow;
-            // reset focus handlers
-            (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
-            if (this.modalFocusableElements.length > 0)
-                this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
-        }
-        else if (newValue === false) {
+            this.dialog.showModal();
             this.componentShow.emit();
-            this.classCollection.delete(this.classHide);
             document.body.style.overflow = 'hidden';
-            this.setFocus();
         }
-    }
-    /**
-     * Handle 'escape' key down
-     * @param event - keydown event
-     */
-    handleKeyDown(event) {
-        // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
-        if (this.closeButton && event.key === 'Escape') {
-            this.hide = true;
+        else {
+            this.dialog.close();
+            this.componentHide.emit();
+            document.body.style.overflow = this.bodyOverflow;
         }
     }
     /*************
@@ -145,43 +73,38 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         this.messages = initLocales(this.element).messages;
         // Validate
         this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
-        this.hasContent = this.element.querySelector('[slot="content"]') !== null;
         this.titleId = `${this.identifier}-title`;
         this.validateModalTitle(this.modalTitle);
-        this.validateHide(this.hide);
         this.validateDialogRole(this.dialogRole);
     }
     /**
-     * Add observer on component to set focus when displayed
+     * Define open state on component load
      */
     componentDidLoad() {
-        new MutationObserver(mutationList => {
-            // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
-            if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
-                // Set focus on first element
-                this.modalFocusableElements[0].focus();
-            }
-        }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
+        this.watchOpen(this.open);
+        // update open prop when use escape key
+        this.dialog.addEventListener('close', () => {
+            this.open = false;
+        });
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '472cae1bd3a5291e14265d00ee594c726f179a1f', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: '870e59e1126988fefe5c04380b5bbd593e8629af' }, h("div", { key: '9d49127cf8bf68b55549f379b760c6597b1a2d6c', class: "mg-c-modal__dialog" }, h("header", { key: 'b8629ece3524f5dd64b248080fa06f21980ddf7b', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f38d648290d1db901fb2cc09ae8b8ed13bf7e0b6', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'b12aecfd77b5fb7588c3b2f6487c10c2cba9f097', identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("dialog", { key: '1b3de14b6dddfc77dc5906353a93689d3af9d8c8', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
-                    // store closeButton Element
-                    this.closeButtonElement = el;
-                    // add close button element to modalFocusableElements when it is render
-                    this.modalFocusableElements.unshift(this.closeButtonElement);
+                    this.dialog = el;
                 }
-            } }, h("mg-icon", { key: '2e5590b14d6b4da659f4f6d8630606a9bafdb9c6', icon: "cross" })))), h("h1", { key: '6ca12328af9955d0716c330c32004c68cca11b4c', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { key: '0873f01de1bfe75c2e91ea89b762d433006e7878', class: "mg-c-modal__content" }, h("slot", { key: 'dd8fd2e6527d640c40261dcbae76846d107337dc', name: "content" }))), this.hasActions && (h("footer", { key: 'e97c6d3ad9bbca892afcabeb5b15e63425d05070', class: "mg-c-modal__footer" }, h("slot", { key: 'c865f0b4244f5ea4ed5e7733813a8b10bc985504', name: "actions" })))))));
+            } }, h("mg-card", { key: 'e3d8e671d49f39a0173663fbae37f93c50c0a028' }, h("div", { key: '249b985c471aca4b06548b7e89f68f94a7ee2976', class: "mg-c-modal__dialog" }, h("header", { key: '1c5a329670e1b789c55806a044fa73330582313e', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'a0d0b831d05ef09e78b31dc579df2c204a38b41a', class: "mg-c-modal__close-button" }, h("mg-button", { key: '26d93a8bc8a3fc7578ad4127acad645da28a035c', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton,
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: this.handleClose }, h("mg-icon", { key: 'adbbd878cf4967f02d636bbf815a79a8fe4c08b1', icon: "cross" })))), h("h1", { key: '274ad2b5d4f030725d6bf6201945d668b9ba056e', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'd0bf1bee2472a49da0826a8013fc7f84262d2b4b', class: "mg-c-modal__content" }, h("slot", { key: '83901bde6eeab22c14873e5b8d714826d194cff0' })), this.hasActions && (h("footer", { key: '16ea5be07e639f12373b79be575f9bd142b4c426', class: "mg-c-modal__footer" }, h("slot", { key: 'ca1204b8f12322795a28cadece382be9001b4684', name: "actions" })))))));
     }
     get element() { return this; }
     static get watchers() { return {
         "dialogRole": ["validateDialogRole"],
         "modalTitle": ["validateModalTitle"],
-        "hide": ["validateHide"]
+        "open": ["watchOpen"]
     }; }
     static get style() { return MgModalStyle0; }
 }, [1, "mg-modal", {
@@ -189,14 +112,13 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         "dialogRole": [1, "dialog-role"],
         "modalTitle": [1, "modal-title"],
         "closeButton": [4, "close-button"],
-        "hide": [1028],
+        "open": [1028],
         "hasActions": [32],
-        "hasContent": [32],
         "classCollection": [32]
-    }, [[8, "keydown", "handleKeyDown"]], {
+    }, undefined, {
         "dialogRole": ["validateDialogRole"],
         "modalTitle": ["validateModalTitle"],
-        "hide": ["validateHide"]
+        "open": ["watchOpen"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"mg-modal.js","mappings":"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","names":["MgModal","focusableElements","createID","ClassList","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n",":host{--mg-card-border-radius: var(--mg-modal-border-radius);--mg-card-padding: 1.5rem 2.5rem;--mg-card-border: none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{padding:1rem;margin:-1rem;overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/*# sourceMappingURL=mg-modal.css.map */\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/*\n * @slot content - Modal content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-modal',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private modalFocusableElements: HTMLElement[] = [];\n  private closeButtonElement: HTMLMgButtonElement;\n\n  // Classes\n  private readonly classHide = 'mg-c-modal--hide';\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is hidden\n   */\n  @Prop({ mutable: true }) hide: boolean;\n  @Watch('hide')\n  validateHide(newValue: MgModal['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      document.body.style.overflow = this.bodyOverflow;\n      // reset focus handlers\n      this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n      if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n    } else if (newValue === false) {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      document.body.style.overflow = 'hidden';\n      this.setFocus();\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Define if component is using content slot\n   */\n  @State() hasContent = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Handle 'escape' key down\n   * @param event - keydown event\n   */\n  @Listen('keydown', {\n    target: 'window',\n  })\n  handleKeyDown(event: KeyboardEvent): void {\n    // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n    if (this.closeButton && event.key === 'Escape') {\n      this.hide = true;\n    }\n  }\n\n  /**\n   * Handle last focusable element\n   * @param event - keyboard event\n   */\n  private handleLastFocusableElement = (event): void => {\n    if (event.key === 'Tab' && !event.shiftKey) {\n      event.preventDefault();\n      this.modalFocusableElements[0].focus();\n    }\n  };\n\n  /**\n   * Handle first focusable element\n   * @param event - keyboard event\n   */\n  private handleFirstFocusableElement = (event): void => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      event.preventDefault();\n      this.getLastFocusableElement().focus();\n    }\n  };\n\n  /**\n   * Get last focusablmeElement\n   * @returns last modal focusable element\n   */\n  private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n  /**\n   * Method to manage focus on modal focusable elements\n   */\n  private setFocus = (): void => {\n    // Get all focusable elements\n    const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If close button is enabled or at least one of the slotted element is focusable\n    if (this.closeButton || slottedFocusableElements.length > 0) {\n      // Check if slotted focusable elements have shadowDom with focusable elements\n      this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n        return acc;\n      }, []);\n      // When close button is enabled it's the first focusable element.\n      if (this.closeButton && this.closeButtonElement !== undefined) {\n        this.modalFocusableElements.unshift(this.closeButtonElement);\n      }\n      // Add event listener on last element\n      this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n      // Add event listener on first element (case shift + tab)\n      this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n    }\n  };\n\n  /*************\n   * Handlers *\n   *************/\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateHide(this.hide);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Add observer on component to set focus when displayed\n   */\n  componentDidLoad(): void {\n    new MutationObserver(mutationList => {\n      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n        // Set focus on first element\n        this.modalFocusableElements[0].focus();\n      }\n    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n        <mg-card>\n          <div class=\"mg-c-modal__dialog\">\n            <header class=\"mg-c-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-c-modal__close-button\">\n                  <mg-button\n                    identifier={`${this.identifier}-close-button`}\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    onClick={this.handleClose}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) {\n                        // store closeButton Element\n                        this.closeButtonElement = el;\n                        // add close button element to modalFocusableElements when it is render\n                        this.modalFocusableElements.unshift(this.closeButtonElement);\n                      }\n                    }}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n\n            {this.hasContent && (\n              <article class=\"mg-c-modal__content\">\n                <slot name=\"content\"></slot>\n              </article>\n            )}\n\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-modal.js","mappings":"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","names":["MgModal","createID","ClassList","toString","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n","/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius: var(--mg-c-modal-border-radius);--mg-c-card-spacing: var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border: none}.mg-c-modal{border:none;background:none}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*){--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-modal.css.map */\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/**\n * @slot - Modal content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-modal',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private dialog: HTMLDialogElement;\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-modal> prop \"modalTitle\" is required. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is open\n   */\n  @Prop({ mutable: true }) open = false;\n  @Watch('open')\n  watchOpen(newValue: boolean): void {\n    if (newValue) {\n      this.dialog.showModal();\n      this.componentShow.emit();\n      document.body.style.overflow = 'hidden';\n    } else {\n      this.dialog.close();\n      this.componentHide.emit();\n      document.body.style.overflow = this.bodyOverflow;\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /***********\n   * Handles *\n   ***********/\n\n  /**\n   * Closes the modal.\n   */\n  private handleClose = (): void => {\n    this.open = false;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Define open state on component load\n   */\n  componentDidLoad(): void {\n    this.watchOpen(this.open);\n    // update open prop when use escape key\n    this.dialog.addEventListener('close', () => {\n      this.open = false;\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <dialog\n        role={this.dialogRole}\n        id={this.identifier}\n        class={this.classCollection.join()}\n        aria-labelledby={this.titleId}\n        ref={(el: HTMLDialogElement) => {\n          if (el !== null) {\n            this.dialog = el;\n          }\n        }}\n      >\n        <mg-card>\n          <div class=\"mg-c-modal__dialog\">\n            <header class=\"mg-c-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-c-modal__close-button\">\n                  <mg-button\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    // eslint-disable-next-line react/jsx-no-bind\n                    onClick={this.handleClose}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n            <article class=\"mg-c-modal__content\">\n              <slot></slot>\n            </article>\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-pagination2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { z as ze } from './index.es.js';
+import { z as ze, Z as Ze } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$7 } from './mg-button2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
@@ -9,13 +9,12 @@ import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 
-var NavigationAction;
-(function (NavigationAction) {
-    NavigationAction["NEXT"] = "next";
-    NavigationAction["PREVIOUS"] = "previous";
-})(NavigationAction || (NavigationAction = {}));
+const NavigationAction = {
+    NEXT: 'next',
+    PREVIOUS: 'previous',
+};
 
-const mgPaginationCss = ".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-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}";
+const mgPaginationCss = ".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-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}";
 const MgPaginationStyle0 = mgPaginationCss;
 
 /**
@@ -81,15 +80,15 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error('<mg-pagination> prop "totalPages" must be greater than 0');
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Ze(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error('<mg-pagination> prop "currentPage" must be greater than 0');
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Ze(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
-            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page');
+            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
         }
         this.currentPageChange.emit(newValue);
     }
@@ -115,10 +114,10 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'b708c70615e0fb49d1628dc6cf83e54ea5ab0a61', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '76bdc93c328042ef6d6d8dafce5a701629f59903', label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
-            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '1c8375c68fd7729fb7ea91220ffb4f7267ac3a47', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '1af0c20c2d5ce86e593b2eca82dee410a782c193', icon: "chevron-right" })));
-        return (h(Host, { key: '4490a0b9d3c0ac55519d052b4d76ab8f682f0f3a', hidden: this.totalPages < 2 }, h("nav", { key: 'eaf362cd327e88290f3af5dcfd1d46fff6178ff9', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { key: '06c9786c833302a4ee88ed7f2217875112ee7a20', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '7877dbee55a509b13c8cf881154d96bbe1c5cee7', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'd4615625b40108526f7aaa8f8a8505b2a61e43e9', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '336f048488682bfbdd7510d52519ed495ff5f1b6', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '454f119cb4a20e794be2f708e4f4f5df198da114', icon: "chevron-right" })));
+        return (h(Host, { key: 'b260a359ad34cc05ed6304f6d3312dcecc940f1c', hidden: this.totalPages < 2 }, h("nav", { key: '66e2400d787d7decaabf8bb982842fdc07a7be56', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: '9cea1e9d1e65f15a1e96bb36e924c99f0b383348', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '8232db02df5ce94af250b00ccf000bead9897f88', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: '449f4c3790d159a9703135dd0e9c3e2e09df44a7', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     get element() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"mg-pagination2.js","mappings":"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","names":["createID"],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export enum NavigationAction {\n  NEXT = 'next',\n  PREVIOUS = 'previous',\n}\n",".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-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}/*# sourceMappingURL=mg-pagination.css.map */\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n  tag: 'mg-pagination',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n  shadow: true,\n})\nexport class MgPagination {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPaginationElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-pagination');\n\n  /**\n   * Panignation label. Is a short description.\n   * Customize default value can be usefull to improve accessibility\n   */\n  @Prop({ mutable: true }) label: string;\n\n  /**\n   * Hide navigation label\n   */\n  @Prop() hideNavigationLabels?: boolean;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount?: boolean;\n\n  /**\n   * Component total pages\n   */\n  @Prop() totalPages = 1;\n  @Watch('totalPages')\n  validateTotalPages(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n    }\n  }\n\n  /**\n   * Component current page\n   */\n  @Prop({ reflect: true, mutable: true }) currentPage = 1;\n  @Watch('currentPage')\n  validateCurrentPage(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n    } else if (newValue > this.totalPages) {\n      throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n    }\n\n    this.currentPageChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when current page change\n   */\n  @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n  /**\n   * Change current page from target\n   * @param target - target page\n   */\n  private goToPage = (target: number): void => {\n    this.currentPage = target;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * select handler\n   * @param event - value change event\n   */\n  private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n    const to = Number(event.target.value);\n    this.goToPage(to > 0 ? to : 1);\n  };\n\n  /**\n   * Go to 'previous/next' page button handler\n   * @param action - navigation action\n   * @param disabled - button disable state\n   */\n  private handleGoToPage = (action: string, disabled: boolean): void => {\n    !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTotalPages(this.totalPages);\n    this.validateCurrentPage(this.currentPage);\n    // Set default label\n    if (this.label === undefined || this.label === '') {\n      this.label = this.messages.pagination.label;\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const navigationActionButton = (disabled: boolean, action: string) => (\n      <mg-button\n        identifier={`${this.identifier}-button-${action}`}\n        label={this.messages.pagination[`${action}Page`]}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => this.handleGoToPage(action, disabled)}\n        disabled={disabled}\n        variant=\"flat\"\n        isIcon={this.hideNavigationLabels}\n      >\n        {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n        {!this.hideNavigationLabels && this.messages.general[action]}\n        {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n      </mg-button>\n    );\n\n    return (\n      <Host hidden={this.totalPages < 2}>\n        <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n          {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n          {!this.hidePageCount && (\n            <mg-input-select\n              identifier={`${this.identifier}-select`}\n              items={range(1, this.totalPages).map(page => page.toString())}\n              label={this.messages.pagination.selectPage}\n              label-hide={true}\n              on-value-change={this.handleSelect}\n              value={this.currentPage.toString()}\n              placeholder-hide\n            ></mg-input-select>\n          )}\n          <span class=\"mg-u-visually-hidden\">\n            {this.messages.pagination.page} {this.currentPage}\n          </span>\n          <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n            / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n          </span>\n          {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-pagination2.js","mappings":"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","names":["createID","toString"],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export const NavigationAction = {\n  NEXT: 'next',\n  PREVIOUS: 'previous',\n};\n",".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-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}/*# sourceMappingURL=mg-pagination.css.map */\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID, toString } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n  tag: 'mg-pagination',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n  shadow: true,\n})\nexport class MgPagination {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPaginationElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-pagination');\n\n  /**\n   * Panignation label. Is a short description.\n   * Customize default value can be usefull to improve accessibility\n   */\n  @Prop({ mutable: true }) label: string;\n\n  /**\n   * Hide navigation label\n   */\n  @Prop() hideNavigationLabels?: boolean;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount?: boolean;\n\n  /**\n   * Component total pages\n   */\n  @Prop() totalPages = 1;\n  @Watch('totalPages')\n  validateTotalPages(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error(`<mg-pagination> prop \"totalPages\" must be greater than 0. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Component current page\n   */\n  @Prop({ reflect: true, mutable: true }) currentPage = 1;\n  @Watch('currentPage')\n  validateCurrentPage(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error(`<mg-pagination> prop \"currentPage\" must be greater than 0. Passed value: ${toString(newValue)}.`);\n    } else if (newValue > this.totalPages) {\n      throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page.');\n    }\n\n    this.currentPageChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when current page change\n   */\n  @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n  /**\n   * Change current page from target\n   * @param target - target page\n   */\n  private goToPage = (target: number): void => {\n    this.currentPage = target;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * select handler\n   * @param event - value change event\n   */\n  private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n    const to = Number(event.target.value);\n    this.goToPage(to > 0 ? to : 1);\n  };\n\n  /**\n   * Go to 'previous/next' page button handler\n   * @param action - navigation action\n   * @param disabled - button disable state\n   */\n  private handleGoToPage = (action: string, disabled: boolean): void => {\n    !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTotalPages(this.totalPages);\n    this.validateCurrentPage(this.currentPage);\n    // Set default label\n    if (this.label === undefined || this.label === '') {\n      this.label = this.messages.pagination.label;\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const navigationActionButton = (disabled: boolean, action: string) => (\n      <mg-button\n        label={this.messages.pagination[`${action}Page`]}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => this.handleGoToPage(action, disabled)}\n        disabled={disabled}\n        variant=\"flat\"\n        isIcon={this.hideNavigationLabels}\n      >\n        {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n        {!this.hideNavigationLabels && this.messages.general[action]}\n        {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n      </mg-button>\n    );\n\n    return (\n      <Host hidden={this.totalPages < 2}>\n        <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n          {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n          {!this.hidePageCount && (\n            <div class=\"mg-c-pagination__page-count\">\n              <mg-input-select\n                identifier={`${this.identifier}-select`}\n                items={range(1, this.totalPages).map(page => page.toString())}\n                label={this.messages.pagination.selectPage}\n                label-hide={true}\n                on-value-change={this.handleSelect}\n                value={this.currentPage.toString()}\n                placeholder-hide\n              ></mg-input-select>\n              <span class=\"mg-u-visually-hidden\">\n                {this.messages.pagination.page} {this.currentPage}\n              </span>\n              / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n            </div>\n          )}\n          {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-panel.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { z as ze, I as Ie, Z as Ze } from './index.es.js';
+import { z as ze, I as Ie, Q as Qe, Z as Ze } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$a } from './mg-button2.js';
 import { d as defineCustomElement$9 } from './mg-card2.js';
@@ -20,7 +20,7 @@ const expandToggleDisplays = ['text', 'icon'];
  */
 const titlePositions = ['left', 'right'];
 
-const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 1rem 0 .3rem}.mg-c-panel__header.mg-c-panel__header--reverse{padding-right:.3rem;padding-left:1rem}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:.3rem 0}.mg-c-panel__header-content{min-height:var(--default-size);flex:1 auto;align-items:center;padding-left:.3rem}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:.3rem}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:.3rem}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-panel-content-padding)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:1rem}.mg-c-panel ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
+const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*){--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 MgPanelStyle0 = mgPanelCss;
 
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
@@ -86,17 +86,17 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
          * Render collapse button
          * @returns collpase button
          */
-        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
         /**
          * Render edit button
          * @returns edit Button
          */
-        this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })));
+        this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton }, h("mg-icon", { icon: "pen" })));
         /**
          * Render input button
          * @returns edit title input
          */
-        this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
+        this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, characterLeftHide: true, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton }, h("mg-icon", { icon: "check" }))));
         /**
          * Render title
          * @returns title element
@@ -136,8 +136,8 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!Ze(newValue))
-            throw new Error('<mg-panel> prop "panelTitle" is required.');
+        if (!Qe(newValue))
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Ze(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -146,14 +146,14 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
     }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Ze(newValue)}.`);
     }
     handleExpanded(newValue) {
         this.expandedChange.emit(newValue);
     }
     validateExpandToggleDisplay(newValue) {
         if (!expandToggleDisplays.includes(newValue))
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Ze(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -187,7 +187,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: 'd01136210425cb7790aab87d6c137ba74fc02af5', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '84084da775de623fd20c069de5e49d2542755907' }, h("header", { key: '9f3ef1d0d7b2dc275d0c7b39175e0f775cbb1e1b', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '4b6cd2b1b604515d657368642fe21b21eb33b55b', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '45db8591e0b85ed5e9704dc1a42fa75d24e96e39' })))));
+        return (h("section", { key: '3999a8ed86a5b7eb4329e4c2aa9064535f6fad99', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'bc777219b2e11f08975d6daa911b237a5a71f0b1' }, h("header", { key: '8e740323476aaa2f7c4f10c52b2107f05e156f1a', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '9afe2db9371628027e8c2feff6b11235432f98d2', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '3a6592a91938b6dee66e7b59f7a7e490256582eb' })))));
     }
     get element() { return this; }
     static get watchers() { return {