@mgdis/mg-components 3.1.0 → 3.2.0

package/dist/components/mg-message.js

@@ -9,7 +9,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
 
-const mgMessageCss = ".mg-message{display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);-webkit-box-shadow:0 0.3rem 0.8rem 0 hsla(var(--color-dark), 0.1);box-shadow:0 0.3rem 0.8rem 0 hsla(var(--color-dark), 0.1)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-line-pack:stretch;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{-ms-flex-positive:1;flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ".mg-message{display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-line-pack:stretch;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{-ms-flex-positive:1;flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
 
 const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -32,7 +32,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Message variant
      */
-    this.variant = variants[0];
+    this.variant = variants[0]; // info
     /**
      * Define if message has a cross button
      * RG 01: https://jira.mgdis.fr/browse/PDA9-140
@@ -69,6 +69,8 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Get icon corresponding to variant
+     *
+     * @returns {string} icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -132,6 +134,11 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.validateDelay(this.delay);
     this.validateHide(this.hide);
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
   }
@@ -147,7 +154,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "identifier": [1],
     "delay": [2],
     "variant": [1],
-    "closeButton": [4, "close-button"],
+    "closeButton": [1028, "close-button"],
     "hide": [1028],
     "classList": [32],
     "hasActions": [32]

package/dist/components/mg-modal.d.ts

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

package/dist/components/mg-modal.js

@@ -0,0 +1,147 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createID, C as ClassList } from './components.utils.js';
+import { m as messages } from './index2.js';
+import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+
+const mgModalCss = ".mg-modal{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-dark), 50%)}.mg-modal__dialog{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:none;flex:none;-ms-flex-item-align:center;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:100%;max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:hsl(var(--color-light));-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__content{overflow-y:auto}.mg-modal__close-button{float:right;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)}.mg-modal .mg-modal__content ::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+
+const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentShow = createEvent(this, "component-show", 7);
+    this.componentHide = createEvent(this, "component-hide", 7);
+    /************
+     * Internal *
+     ************/
+    this.closeButtonId = '';
+    this.titleId = '';
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-modal');
+    /**
+     * Define if modal has a cross button
+     */
+    this.closeButton = false;
+    /**
+     * Define if modal is hidden
+     */
+    this.hide = false;
+    /**
+     * Define if component is using actions slot
+     */
+    this.hasActions = false;
+    /**
+     * Define if component is using content slot
+     */
+    this.hasContent = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-modal']);
+    /*************
+     * Handlers *
+     *************/
+    /**
+     * Handle close button
+     *
+     * @returns {void}
+     */
+    this.handleClose = () => {
+      this.hide = true;
+    };
+  }
+  validateHide(newValue) {
+    if (newValue) {
+      this.componentHide.emit();
+      this.classList.add('mg-modal--hide');
+    }
+    else {
+      this.componentShow.emit();
+      this.classList.delete('mg-modal--hide');
+    }
+  }
+  /**
+   * Handle 'escape' key down
+   *
+   * @param {KeyboardEvent} event keydown event
+   * @returns {void}
+   */
+  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;
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
+    this.hasContent = this.element.querySelector('[slot="content"]') !== null;
+    if (this.closeButton) {
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    this.titleId = `${this.identifier}-title`;
+    this.validateHide(this.hide);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.modal.closeButton, onClick: this.handleClose, class: "mg-modal__close-button" }, h("mg-icon", { icon: "cross" }))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "hide": ["validateHide"]
+  }; }
+  static get style() { return mgModalCss; }
+}, [1, "mg-modal", {
+    "identifier": [1],
+    "modalTitle": [1, "modal-title"],
+    "closeButton": [1028, "close-button"],
+    "hide": [1028],
+    "hasActions": [32],
+    "hasContent": [32],
+    "classList": [32]
+  }, [[8, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-modal", "mg-button", "mg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgModal$1);
+      }
+      break;
+    case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgModal = MgModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgModal, defineCustomElement };

package/dist/components/mg-pagination.js

@@ -31,10 +31,10 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
  * range(1, 5) = [1, 2, 3, 4, 5]
  * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
  *
- * @param start
- * @param end
- * @param step
- * @returns {number[]}
+ * @param {number} start start range
+ * @param {number} end start end
+ * @param {number} step step size
+ * @returns {number[]} range numbers
  */
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -66,15 +66,21 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.currentPage = 1;
     /**
      * Change current page from target
-     * @param target
+     *
+     * @param {number} target target page
+     * @returns {void}
      */
-    this.goToPage = (target) => (this.currentPage = target);
+    this.goToPage = (target) => {
+      this.currentPage = target;
+    };
     /************
      * Handlers *
      ************/
     /**
-     * Default click handler
-     * @param event
+     * select handler
+     *
+     * @param {InputEvent} event value change event
+     * @returns {void}
      */
     this.handleSelect = (event) => {
       const to = Number(event.target.value);
@@ -82,9 +88,13 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Go to 'previous/next' page button handler
+     *
+     * @param {string} action navigation action
      * @returns {void}
      */
-    this.handleGoToPage = (action) => this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+    this.handleGoToPage = (action) => {
+      this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+    };
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {
@@ -103,15 +113,25 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), messages.pagination[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-    return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? messages.pagination.pages : messages.pagination.pages), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+    return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? messages.pagination.pages : messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get watchers() { return {
     "totalPages": ["validateTotalPages"],

package/dist/components/mg-panel.d.ts

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

package/dist/components/mg-panel.js

@@ -0,0 +1,210 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createID, C as ClassList } from './components.utils.js';
+import { m as messages } from './index2.js';
+import { d as defineCustomElement$7 } from './mg-button2.js';
+import { d as defineCustomElement$6 } from './mg-character-left2.js';
+import { d as defineCustomElement$5 } from './mg-icon2.js';
+import { d as defineCustomElement$4 } from './mg-input-text2.js';
+import { d as defineCustomElement$3 } from './mg-input-title2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip2.js';
+
+const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-panel__header{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:0 1rem 0 0.3rem;-ms-flex-align:center;align-items:center}.mg-panel__header-left,.mg-panel__header-right{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;margin:0.3rem 0}.mg-panel__header-left mg-input-text{-ms-flex-positive:1;flex-grow:1}.mg-panel__collapse-button{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500;margin:0 0.3rem 0 0}.mg-panel__content{padding:1.5rem}.mg-panel ::slotted([slot=header-right]){display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+
+const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.titleChange = createEvent(this, "title-change", 7);
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-panel');
+    /**
+     * Panel is opened
+     */
+    this.expanded = false;
+    /**
+     * Panel title is editabled
+     */
+    this.titleEditable = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-panel']);
+    /**
+     * Title is in edition mode
+     */
+    this.isEditing = false;
+    /************
+     * Methods *
+     ************/
+    /**
+     * Toggle is editing state
+     *
+     * @returns {void}
+     */
+    this.toggleIsEditing = () => {
+      this.isEditing = !this.isEditing;
+    };
+    /************
+     * Handlers *
+     ************/
+    /**
+     * Collapse button click handler
+     *
+     * @returns {void}
+     */
+    this.handleCollapseButton = () => {
+      this.expanded = !this.expanded;
+    };
+    /**
+     * Edit button click handler
+     *
+     * @returns {void}
+     */
+    this.handleEditButton = () => {
+      this.toggleIsEditing();
+    };
+    /**
+     * Update title handler
+     *
+     * @param {CustomEvent<string>} event input value change event
+     * @returns {void}
+     */
+    this.handleUpdateTitle = (event) => {
+      this.updatedPanelTitle = event.detail;
+    };
+    /**
+     * Cancel edition button handler
+     *
+     * @returns {void}
+     */
+    this.handleCancelEditButton = () => {
+      this.updatedPanelTitle = undefined;
+      this.toggleIsEditing();
+    };
+    /**
+     * Validate edition button handler
+     *
+     * @returns {void}
+     */
+    this.handleValidateEditButton = () => {
+      if (this.updatedPanelTitle !== undefined)
+        this.panelTitle = this.updatedPanelTitle;
+      this.toggleIsEditing();
+    };
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Header left conditional render
+     *
+     * @typedef {HTMLElement} HTMLMgButtonElement
+     * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
+     */
+    this.headerLeft = () => {
+      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", class: "mg-panel__collapse-button", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content` }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
+      if (this.titleEditable && !this.isEditing) {
+        return [
+          collapseButton(),
+          h("mg-button", { "is-icon": true, variant: "secondary", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
+        ];
+      }
+      if (this.titleEditable && this.isEditing) {
+        return [
+          collapseButton(),
+          h("mg-input-text", { label: messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: 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: messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
+        ];
+      }
+      return collapseButton();
+    };
+  }
+  handelTileChange(newValue) {
+    this.titleChange.emit(newValue);
+  }
+  /**
+   * Edit DOM after render
+   *
+   * @returns {void}
+   */
+  componentDidRender() {
+    // when we are editing we get focus on edition input
+    if (this.isEditing) {
+      this.editInputElement.setFocus();
+    }
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: "mg-panel__header-left" }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "panelTitle": ["handelTileChange"]
+  }; }
+  static get style() { return mgPanelCss; }
+}, [1, "mg-panel", {
+    "identifier": [1],
+    "panelTitle": [1025, "panel-title"],
+    "expanded": [1028],
+    "titleEditable": [4, "title-editable"],
+    "classList": [32],
+    "isEditing": [32],
+    "updatedPanelTitle": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-panel", "mg-button", "mg-character-left", "mg-icon", "mg-input-text", "mg-input-title", "mg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-panel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgPanel$1);
+      }
+      break;
+    case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "mg-character-left":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "mg-input-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-input-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgPanel = MgPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgPanel, defineCustomElement };

package/dist/components/mg-popover.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './mg-button2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 import { c as createPopper } from './popper.js';
 
-const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));-webkit-box-shadow:0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);box-shadow:0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:9999;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>*,.mg-popover__title .sc-mg-popover-s>*{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
+const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>*,.mg-popover__title .sc-mg-popover-s>*{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
 
 const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -35,18 +35,21 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.disabled = false;
     /**
      * Check if clicked outside of component
-     * @param e {event}
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
      */
     // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
     /* istanbul ignore next */
-    this.clickOutside = e => {
+    this.clickOutside = (event) => {
       var _a;
-      if (!this.disabled && ((_a = e.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
+      if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
         this.display = false;
       }
     };
     /**
      * Show popover
+     *
      * @returns {void}
      */
     this.show = () => {
@@ -66,6 +69,7 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Hide popover
+     *
      * @returns {void}
      */
     this.hide = () => {
@@ -78,6 +82,7 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle action for close button
+     *
      * @returns {void}
      */
     this.handleCloseButton = () => {
@@ -95,6 +100,11 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
   componentDidLoad() {
     //Check if slotted title is a heading
     const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -137,8 +147,13 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
     this.handleDisplay(this.display);
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.popover.closeButton, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return this; }
   static get watchers() { return {