@mgdis/mg-components 3.2.0 → 4.0.1

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js

@@ -1,8 +1,7 @@
-import { Component, Event, h, Prop, State, Method, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Prop, State, Method, Watch } from '@stencil/core';
 import { MgInput } from '../MgInput';
-import { InputClass } from '../MgInput.conf';
 import { createID, ClassList } from '../../../../utils/components.utils';
-import { messages } from '../../../../locales';
+import { initLocales } from '../../../../locales';
 export class MgInputTextarea {
   constructor() {
     /************
@@ -10,7 +9,9 @@ export class MgInputTextarea {
      ************/
     // classes
     this.classFocus = 'is-focused';
-    this.classError = InputClass.ERROR;
+    this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -44,15 +45,19 @@ export class MgInputTextarea {
     /**
      * Define input width
      */
-    this.width = 'full';
+    this.mgWidth = 'full';
     /**
-     * Define input pattern error message
+     * Define the number of visible text lines for the control
      */
     this.rows = 3;
     /**
      * Define if component should display character left
      */
     this.displayCharacterLeft = true;
+    /**
+     * Define if input is resizable
+     */
+    this.resizable = 'none';
     /**
      * Component classes
      */
@@ -61,6 +66,10 @@ export class MgInputTextarea {
      * Handle input event
      */
     this.handleInput = () => {
+      if (this.hasError) {
+        this.checkValidity();
+        this.checkError();
+      }
       this.value = this.input.value;
     };
     /**
@@ -77,9 +86,8 @@ export class MgInputTextarea {
       // Manage focus
       this.classList.delete(this.classFocus);
       this.classList = new ClassList(this.classList.classes);
-      // Check validity
-      this.checkValidity();
-      this.checkError();
+      // Display Error
+      this.displayError();
     };
     /**
      * Get pattern validity
@@ -113,14 +121,7 @@ export class MgInputTextarea {
       }
       // required
       else if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
     /**
@@ -139,6 +140,14 @@ export class MgInputTextarea {
     this.checkValidity();
     this.valueChange.emit(newValue);
   }
+  validateDisplayCharacterLeft(newValue) {
+    if (newValue) {
+      this.classList.add(this.classHasDisplayCharacterLeft);
+    }
+    else {
+      this.classList.delete(this.classHasDisplayCharacterLeft);
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -147,6 +156,7 @@ export class MgInputTextarea {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -157,6 +167,11 @@ export class MgInputTextarea {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    this.characterLeftId = `${this.identifier}-character-left`;
+    // Validate
+    this.validateDisplayCharacterLeft(this.displayCharacterLeft);
     this.validatePattern();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -171,8 +186,15 @@ export class MgInputTextarea {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, displayCharacterLeft: this.displayCharacterLeft, characterLeftTemplate: this.characterLeftTemplate, maxlength: this.maxlength, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false },
-      h("textarea", { class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) })));
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false },
+      h("div", { class: "mg-input__with-character-left" },
+        h("textarea", { class: {
+            'mg-input__box': true,
+            'mg-input__box--resizable': this.resizable === 'both',
+            'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
+            'mg-input__box--resizable-vertical': this.resizable === 'vertical',
+          }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }),
+        this.displayCharacterLeft && this.maxlength && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
   }
   static get is() { return "mg-input-textarea"; }
   static get encapsulation() { return "shadow"; }
@@ -377,7 +399,7 @@ export class MgInputTextarea {
       "reflect": false,
       "defaultValue": "false"
     },
-    "width": {
+    "mgWidth": {
       "type": "any",
       "mutable": false,
       "complexType": {
@@ -396,7 +418,7 @@ export class MgInputTextarea {
         "tags": [],
         "text": "Define input width"
       },
-      "attribute": "width",
+      "attribute": "mg-width",
       "reflect": false,
       "defaultValue": "'full'"
     },
@@ -446,7 +468,7 @@ export class MgInputTextarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define input pattern error message"
+        "text": "Define the number of visible text lines for the control"
       },
       "attribute": "rows",
       "reflect": false,
@@ -487,23 +509,6 @@ export class MgInputTextarea {
       "reflect": false,
       "defaultValue": "true"
     },
-    "characterLeftTemplate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Template to use for characters left sentence"
-      },
-      "attribute": "character-left-template",
-      "reflect": false
-    },
     "helpText": {
       "type": "string",
       "mutable": false,
@@ -554,6 +559,24 @@ export class MgInputTextarea {
       },
       "attribute": "invalid",
       "reflect": false
+    },
+    "resizable": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'none' | 'both' | 'horizontal' | 'vertical'",
+        "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if input is resizable"
+      },
+      "attribute": "resizable",
+      "reflect": false,
+      "defaultValue": "'none'"
     }
   }; }
   static get states() { return {
@@ -612,8 +635,12 @@ export class MgInputTextarea {
       }
     }
   }; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "handleValue"
+    }, {
+      "propName": "displayCharacterLeft",
+      "methodName": "validateDisplayCharacterLeft"
     }]; }
 }

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css

@@ -11,16 +11,9 @@
   min-height: var(--default-size);
   max-width: 100%;
   margin-bottom: var(--mg-inputs-margin-bottom, 0);
-  /* Style when input is not valid */
   /* Label */
   /* Label-on-top */
 }
-.mg-input.is-not-valid {
-  color: hsl(var(--color-danger));
-}
-.mg-input.is-not-valid .mg-input__box {
-  border-color: hsl(var(--color-danger));
-}
 .mg-input mg-input-title {
   flex-shrink: var(--mg-inputs-shrink, 1);
   width: var(--mg-inputs-title-width, auto);
@@ -74,6 +67,11 @@
 .mg-input__input-container mg-icon {
   display: flex;
 }
+.mg-input__input-container .mg-input__help-text,
+.mg-input__input-container .mg-input__error {
+  text-align: start;
+  font-size: 1.2rem;
+}
 
 .mg-input__input {
   display: flex;
@@ -82,11 +80,22 @@
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
 }
-.mg-input__input + * {
-  text-align: start;
+.mg-input__input.mg-input__input--has-error .mg-input__box {
+  border-color: hsl(var(--color-danger));
+}
+.mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
 
+.mg-input__error {
+  display: inline-block;
+  margin-top: 0.2rem;
+  padding: 0.3rem 0.8rem;
+  border-radius: 0.3rem;
+  background: hsl(var(--mg-inputs-error-bg-color));
+  color: hsl(var(--color-danger));
+}
+
 /**
  * A11Y
  */

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -19,6 +19,8 @@ export class MgInputToggle {
     this.classReadonly = 'mg-input--toggle-readonly';
     this.classDisabled = 'mg-input--toggle-disabled';
     this.classIsActive = 'mg-input--toggle-is-active';
+    this.classOnOff = 'mg-input--toggle-on-off';
+    this.classIcon = 'mg-input--toggle-icon';
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -106,11 +108,15 @@ export class MgInputToggle {
   }
   handleIsOnOff(newValue) {
     if (newValue)
-      this.classList.add(`mg-input--toggle-on-off`);
+      this.classList.add(this.classOnOff);
+    else
+      this.classList.delete(this.classOnOff);
   }
   handleIsIcon(newValue) {
     if (newValue)
-      this.classList.add(`mg-input--toggle-icon`);
+      this.classList.add(this.classIcon);
+    else
+      this.classList.delete(this.classIcon);
   }
   handleReadonly(newValue) {
     if (newValue)
@@ -173,8 +179,8 @@ export class MgInputToggle {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, width: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: undefined, isFieldset: false },
-      h("button", { type: "button", role: "switch", "aria-checked": this.checked, "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked },
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false },
+      h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked },
         h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" },
           h("slot", { name: "item-1" })),
         h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" },

package/dist/collection/components/molecules/mg-form/mg-form.css

@@ -12,4 +12,8 @@
 .mg-form.mg-form--all-required,
 .mg-form-group.mg-form--all-required {
   --mg-input-title-display: none;
+}
+.mg-form > p,
+.mg-form-group > p {
+  font-size: 1.2rem;
 }

package/dist/collection/components/molecules/mg-form/mg-form.js

@@ -1,6 +1,6 @@
 import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgForm {
   constructor() {
     /**
@@ -37,12 +37,12 @@ export class MgForm {
       // All fields are required
       // mg-input-toggle can not be required
       if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-        this.requiredMessage = messages.form.allRequired;
+        this.requiredMessage = this.messages.form.allRequired;
         this.classList.add('mg-form--all-required');
       }
       // Some fields are required
       else if (requiredInputs.length > 0) {
-        this.requiredMessage = messages.form.required;
+        this.requiredMessage = this.messages.form.required;
       }
     };
     /**
@@ -79,6 +79,8 @@ export class MgForm {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
     // Get slotted mgIputs
     this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
     // Define required message

package/dist/collection/components/molecules/mg-message/{mg-message.stories.js → doc/mg-message.stories.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { variants } from './mg-message.conf';
+import { variants } from '../mg-message.conf';
 export default {
   component: 'mg-message',
   title: 'Molecules/mg-message',

package/dist/collection/components/molecules/mg-message/mg-message.js

@@ -1,12 +1,15 @@
 import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
 import { variants } from './mg-message.conf';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgMessage {
   constructor() {
     /************
      * Internal *
      ************/
+    // classes
+    this.classHide = 'mg-message--hide';
+    // IDs
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
@@ -82,10 +85,12 @@ export class MgMessage {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-message> prop "variant" must be one of : ${variants.join(', ')}`);
     }
-    if (oldValue !== undefined) {
-      this.classList.delete(`mg-message--${oldValue}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-message--${oldValue}`);
+      }
+      this.classList.add(`mg-message--${newValue}`);
     }
-    this.classList.add(`mg-message--${this.variant}`);
   }
   validateCloseButton(newValue) {
     if (newValue && this.hasActions) {
@@ -96,11 +101,11 @@ export class MgMessage {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add('mg-message--hide');
+      this.classList.add(this.classHide);
     }
     else {
       this.componentShow.emit();
-      this.classList.delete('mg-message--hide');
+      this.classList.delete(this.classHide);
     }
     this.hideWithDelay();
   }
@@ -111,6 +116,9 @@ export class MgMessage {
    * Check if component props are well configured on init
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validateVariant(this.variant);
     // Check if close button is an can be activated
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
@@ -138,7 +146,7 @@ export class MgMessage {
         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-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose },
           h("mg-icon", { icon: "cross" }))))));
   }
   static get is() { return "mg-message"; }

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -9,13 +9,11 @@
   left: 0;
   z-index: 1000;
   padding: 2rem 0;
-  background-color: hsla(var(--color-dark), 50%);
+  background-color: hsla(var(--color-light), 85%);
 }
 .mg-modal__dialog {
   display: flex;
   flex-direction: column;
-  flex: none;
-  /* IE FIX */
   align-self: center;
   row-gap: 3rem;
   padding: 1.5rem 2.5rem;
@@ -37,16 +35,16 @@
   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(*) {
+.mg-modal .mg-modal__content {
+  overflow-y: auto;
+}
+.mg-modal .mg-modal__content::slotted(*) {
   font-size: var(--mg-modal-content-font-size);
 }
 .mg-modal.mg-modal--hide {

package/dist/collection/components/molecules/mg-modal/mg-modal.js

@@ -1,11 +1,14 @@
 import { Component, h, Prop, State, Watch, Element, Event, Listen } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgModal {
   constructor() {
     /************
      * Internal *
      ************/
+    // Classes
+    this.classHide = 'mg-modal--hide';
+    // IDs
     this.closeButtonId = '';
     this.titleId = '';
     /**
@@ -48,11 +51,11 @@ export class MgModal {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add('mg-modal--hide');
+      this.classList.add(this.classHide);
     }
     else {
       this.componentShow.emit();
-      this.classList.delete('mg-modal--hide');
+      this.classList.delete(this.classHide);
     }
   }
   /**
@@ -76,6 +79,9 @@ export class MgModal {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.hasContent = this.element.querySelector('[slot="content"]') !== null;
     if (this.closeButton) {
@@ -93,8 +99,9 @@ export class MgModal {
     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" }))),
+          this.closeButton && (h("span", { class: "mg-modal__close-button" },
+            h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose },
+              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" }))),

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js

@@ -1,7 +1,7 @@
-import { Component, h, Prop, Watch, Event } from '@stencil/core';
+import { Component, Element, h, Prop, Watch, Event } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { NavigationAction } from './mg-pagination.conf';
-import { messages } from './../../../locales';
+import { initLocales } from './../../../locales';
 /**
  * Range generator
  *
@@ -25,19 +25,11 @@ import { messages } from './../../../locales';
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
   constructor() {
-    /**************
-     * 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-pagination');
-    /**
-     * Panignation label. Is a short description.
-     * Customize default value can be usefull to improve accessibility
-     */
-    this.label = 'pagination';
     /**
      * Component total pages
      */
@@ -101,8 +93,15 @@ export class MgPagination {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
+    // Set default label
+    if (this.label === undefined || this.label === '') {
+      this.label = this.messages.pagination.label;
+    }
   }
   /**
    * Render
@@ -110,24 +109,24 @@ export class MgPagination {
    * @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`], 
+    const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: this.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.general[action],
+      this.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("mg-input-select", { 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", { class: "sr-only" },
-        messages.pagination.page,
+        this.messages.pagination.page,
         " ",
         this.currentPage),
       h("span", null,
         "/ ",
         this.totalPages,
         " ",
-        this.totalPages > 1 ? messages.pagination.pages : messages.pagination.page),
+        this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page),
       navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
@@ -159,7 +158,7 @@ export class MgPagination {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -172,8 +171,7 @@ export class MgPagination {
         "text": "Panignation label. Is a short description.\nCustomize default value can be usefull to improve accessibility"
       },
       "attribute": "label",
-      "reflect": false,
-      "defaultValue": "'pagination'"
+      "reflect": false
     },
     "totalPages": {
       "type": "number",
@@ -228,6 +226,7 @@ export class MgPagination {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "totalPages",
       "methodName": "validateTotalPages"

package/dist/collection/components/molecules/mg-panel/{mg-panel.stories.js → doc/mg-panel.stories.js}

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 export default {
   component: 'mg-panel',
   title: 'Molecules/mg-panel',
+  parameters: { actions: { handles: ['title-change'] } },
 };
 /**
  * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
@@ -13,8 +14,14 @@ const Template = args => {
   delete args.panelTitle;
   const titleEditable = args.titleEditable;
   delete args.titleEditable;
+  const expandToggleDisabled = args.expandToggleDisabled;
+  delete args.expandToggleDisabled;
+  const titlePattern = args.titlePattern;
+  delete args.titlePattern;
+  const titlePatternErrorMessage = args.titlePatternErrorMessage;
+  delete args.titlePatternErrorMessage;
   // return element
-  return (h("mg-panel", Object.assign({}, args, { "panel-title": panelTitle, "title-editable": titleEditable }),
+  return (h("mg-panel", Object.assign({}, args, { "panel-title": panelTitle, "title-editable": titleEditable, "expand-toggle-disabled": expandToggleDisabled, "title-pattern": titlePattern, "title-pattern-error-message": titlePatternErrorMessage }),
     h("div", null, "Content"),
     h("div", { slot: "header-right" },
       h("mg-button", { variant: "secondary" },
@@ -28,4 +35,5 @@ MgPanel.args = {
   panelTitle: 'title',
   expanded: false,
   titleEditable: true,
+  expandToggleDisabled: true,
 };