@mgdis/mg-components 5.12.0 → 5.13.0

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

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
+import { expandToggleDisplays, titlePositions } from './mg-panel.conf';
 export class MgPanel {
   constructor() {
     /************
@@ -19,9 +20,8 @@ export class MgPanel {
      * Collapse button click handler
      */
     this.handleCollapseButton = () => {
-      if (!this.expandToggleDisabled) {
+      if (!this.expandToggleDisabled)
         this.expanded = !this.expanded;
-      }
     };
     /**
      * Edit button click handler
@@ -47,60 +47,92 @@ export class MgPanel {
      * Validate edition button handler
      */
     this.handleValidateEditButton = () => {
-      if (this.editInputElement.valid) {
-        if (this.updatedPanelTitle !== undefined)
-          this.panelTitle = this.updatedPanelTitle;
-        this.toggleIsEditing();
-      }
+      if (!this.editInputElement.valid)
+        return;
+      if (this.updatedPanelTitle !== undefined)
+        this.panelTitle = this.updatedPanelTitle;
+      this.toggleIsEditing();
     };
+    /*************
+     * Render *
+     *************/
     /**
-     * Header left conditional render
-     * @returns header left element
+     * Render collapse button
+     * @returns collpase button
      */
-    this.headerLeft = () => {
-      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("span", { class: "mg-panel__collapse-button-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", { 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" })),
-        ];
-      }
-      if (this.titleEditable && this.isEditing) {
-        return [
-          collapseButton(),
-          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.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !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" })));
+    /**
+     * 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" }))));
+    /**
+     * Render title
+     * @returns title element
+     */
+    this.renderTitle = () => {
+      const elementsToRender = [this.renderCollapseButton()];
+      if (this.titleEditable) {
+        if (!this.isEditing)
+          elementsToRender.push(this.renderEditButton());
+        else
+          elementsToRender.push(this.renderEditInput());
       }
-      return collapseButton();
+      return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;
+    };
+    /**
+     * Render header children
+     * @returns header child
+     */
+    this.renderHeaderChildren = () => {
+      const children = [
+        h("div", { class: { 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
+        h("div", { class: "mg-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
+      ];
+      return this.titlePosition === 'right' ? children.reverse() : children;
     };
     this.identifier = createID('mg-panel');
     this.panelTitle = undefined;
     this.titlePattern = undefined;
     this.titlePatternErrorMessage = undefined;
+    this.titleEditable = false;
+    this.titlePosition = titlePositions[0];
     this.expanded = false;
+    this.expandToggleDisplay = expandToggleDisplays[0];
     this.expandToggleDisabled = undefined;
-    this.titleEditable = false;
     this.classCollection = new ClassList(['mg-panel']);
     this.isEditing = false;
     this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (typeof newValue !== 'string' || newValue.trim() === '')
       throw new Error('<mg-panel> prop "panelTitle" is required.');
-    }
     this.titleChange.emit(newValue);
   }
   validatetitlePattern(newValue) {
-    if (newValue !== undefined && !this.titleEditable) {
+    if (newValue !== undefined && !this.titleEditable)
       throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
-    }
-    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
+    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === ''))
       throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
-    }
+  }
+  validateTitlePosition(newValue) {
+    if (!titlePositions.includes(newValue))
+      throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
   }
   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(', ')}.`);
+    if (newValue === 'icon' && this.titleEditable)
+      this.titleEditable = false;
+  }
   /*************
    * Lifecycle *
    *************/
@@ -113,22 +145,24 @@ export class MgPanel {
     // Validate
     this.validatetitlePattern(this.titlePattern);
     this.validatePanelTitle(this.panelTitle);
+    this.validateExpandToggleDisplay(this.expandToggleDisplay);
+    this.validateTitlePosition(this.titlePosition);
   }
   /**
    * Edit DOM after render
    */
   componentDidRender() {
     // when we are editing we get focus on edition input
-    if (this.isEditing) {
+    if (this.isEditing)
       this.editInputElement.setFocus();
-    }
   }
   /**
    * Render component
-   * @returns html element
+   * @returns rendered component
    */
   render() {
-    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, 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)))));
+    const headerId = `${this.identifier}-header`;
+    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: { 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", null)))));
   }
   static get is() { return "mg-panel"; }
   static get encapsulation() { return "shadow"; }
@@ -213,7 +247,7 @@ export class MgPanel {
         "attribute": "title-pattern-error-message",
         "reflect": false
       },
-      "expanded": {
+      "titleEditable": {
         "type": "boolean",
         "mutable": true,
         "complexType": {
@@ -225,15 +259,38 @@ export class MgPanel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Panel is opened"
+          "text": "Define if panel title is editable"
         },
-        "attribute": "expanded",
+        "attribute": "title-editable",
         "reflect": false,
         "defaultValue": "false"
       },
-      "expandToggleDisabled": {
-        "type": "boolean",
+      "titlePosition": {
+        "type": "string",
         "mutable": false,
+        "complexType": {
+          "original": "TitlePositionType",
+          "resolved": "\"left\" | \"right\"",
+          "references": {
+            "TitlePositionType": {
+              "location": "import",
+              "path": "./mg-panel.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define title position"
+        },
+        "attribute": "title-position",
+        "reflect": false,
+        "defaultValue": "titlePositions[0]"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -243,12 +300,36 @@ export class MgPanel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disable possibility to toggle expand"
+          "text": "Panel is opened"
         },
-        "attribute": "expand-toggle-disabled",
-        "reflect": false
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "titleEditable": {
+      "expandToggleDisplay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ExpandToggleDisplayType",
+          "resolved": "\"icon\" | \"text\"",
+          "references": {
+            "ExpandToggleDisplayType": {
+              "location": "import",
+              "path": "./mg-panel.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define expand toggle button display"
+        },
+        "attribute": "expand-toggle-display",
+        "reflect": false,
+        "defaultValue": "expandToggleDisplays[0]"
+      },
+      "expandToggleDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -260,11 +341,10 @@ export class MgPanel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Panel title is editabled"
+          "text": "Disable possibility to toggle expand"
         },
-        "attribute": "title-editable",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "expand-toggle-disabled",
+        "reflect": false
       }
     };
   }
@@ -316,9 +396,15 @@ export class MgPanel {
       }, {
         "propName": "titlePattern",
         "methodName": "validatetitlePattern"
+      }, {
+        "propName": "titlePosition",
+        "methodName": "validateTitlePosition"
       }, {
         "propName": "expanded",
         "methodName": "handleExpanded"
+      }, {
+        "propName": "expandToggleDisplay",
+        "methodName": "validateExpandToggleDisplay"
       }];
   }
 }

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

@@ -89,6 +89,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  border-bottom: var(--mg-tabs-border-bottom);
 }
 .mg-tabs__content-container:focus-visible {
   outline: none;

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

@@ -300,7 +300,7 @@ export class MgTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tabs items\nRequired"
+          "text": "Tabs items"
         }
       },
       "activeTab": {

package/dist/collection/locales/en/messages.json

@@ -28,7 +28,19 @@
       "result": "result",
       "results": "results",
       "searchResults": "Search result(s) list.",
-      "noResult": "No result."
+      "noResult": "No result.",
+      "sections": {
+        "selected": {
+          "title": "Selected",
+          "titlePlurial": "Selected",
+          "action": "Unselect all"
+        },
+        "notSelected": {
+          "title": "Not selected",
+          "titlePlurial": "Not selected",
+          "action": "Select all"
+        }
+      }
     }
   },
   "form": {

package/dist/collection/locales/fr/messages.json

@@ -28,7 +28,13 @@
       "result": "resultat",
       "results": "resultats",
       "searchResults": "List de resultat(s) de la recherche.",
-      "noResult": "Aucun resultat."
+      "noResult": "Aucun resultat.",
+      "checkedItem": "Sélectionné",
+      "checkedItems": "Sélectionnés",
+      "notCheckedItem": "Non sélectionné",
+      "notCheckedItems": "Non sélectionnés",
+      "unselectAll": "Tout désélectionner",
+      "selectAll": "Tout sélectionner"
     }
   },
   "form": {

package/dist/collection/stories/icon-gallery.js

@@ -0,0 +1,9 @@
+import iconList from '@mgdis/img/dist/icons/index.json';
+import { IconGallery, IconItem } from '@storybook/blocks';
+import React from 'react';
+/**
+ * Template
+ * @returns HTMLElement
+ */
+const Template = () => React.createElement(IconGallery, null, iconList.map(icon => React.createElement(IconItem, { name: icon, key: icon }, React.createElement('mg-icon', { icon: icon }))));
+export default Template;

package/dist/collection/variables.css

@@ -74,9 +74,13 @@
   --color-dark-s: 37.3%;
   --color-dark-l: 13.1%;
   --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
-
+  
+  /* dark-40 */
+  --mg-color-dark-40-hsl: var(--color-dark-h), 7%, 43%;
   /* dark-5 */
-  --mg-color-dark-5-hsl: hsl(var(--color-dark-h), 9%, 96%);
+  --mg-color-dark-5-hsl: var(--color-dark-h), 9%, 96%;
+  /* dark-soft */
+  --mg-color-dark-soft-hsl: var(--color-dark-h), var(--color-dark-s), 90%;
 
   /* Light */
   /* white; (#ffffff) */
@@ -262,6 +266,7 @@
   --mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);
   --mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);
   --mg-tabs-color-active-hsl: var(--mg-color-app-hsl);
+  --mg-tabs-border-bottom: solid 0.1rem hsl(var(--mg-color-dark-soft-hsl));
 
   /*
     <mg-details>

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export { MgForm as MgForm } from '../types/components/molecules/mg-form/mg-form'
 export { MgIcon as MgIcon } from '../types/components/atoms/mg-icon/mg-icon';
 export { MgIllustratedMessage as MgIllustratedMessage } from '../types/components/molecules/mg-illustrated-message/mg-illustrated-message';
 export { MgInputCheckbox as MgInputCheckbox } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox';
+export { MgInputCheckboxPaginated as MgInputCheckboxPaginated } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated';
 export { MgInputDate as MgInputDate } from '../types/components/molecules/inputs/mg-input-date/mg-input-date';
 export { MgInputNumeric as MgInputNumeric } from '../types/components/molecules/inputs/mg-input-numeric/mg-input-numeric';
 export { MgInputPassword as MgInputPassword } from '../types/components/molecules/inputs/mg-input-password/mg-input-password';

package/dist/components/index.js

@@ -10,6 +10,7 @@ export { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-f
 export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.js';
 export { MgIllustratedMessage, defineCustomElement as defineCustomElementMgIllustratedMessage } from './mg-illustrated-message.js';
 export { MgInputCheckbox, defineCustomElement as defineCustomElementMgInputCheckbox } from './mg-input-checkbox.js';
+export { MgInputCheckboxPaginated, defineCustomElement as defineCustomElementMgInputCheckboxPaginated } from './mg-input-checkbox-paginated.js';
 export { MgInputDate, defineCustomElement as defineCustomElementMgInputDate } from './mg-input-date.js';
 export { MgInputNumeric, defineCustomElement as defineCustomElementMgInputNumeric } from './mg-input-numeric.js';
 export { MgInputPassword, defineCustomElement as defineCustomElementMgInputPassword } from './mg-input-password.js';

package/dist/components/index2.js

@@ -27,7 +27,19 @@ const input$1 = {
 		result: "result",
 		results: "results",
 		searchResults: "Search result(s) list.",
-		noResult: "No result."
+		noResult: "No result.",
+		sections: {
+			selected: {
+				title: "Selected",
+				titlePlurial: "Selected",
+				action: "Unselect all"
+			},
+			notSelected: {
+				title: "Not selected",
+				titlePlurial: "Not selected",
+				action: "Select all"
+			}
+		}
 	}
 };
 const form$1 = {
@@ -114,7 +126,13 @@ const input = {
 		result: "resultat",
 		results: "resultats",
 		searchResults: "List de resultat(s) de la recherche.",
-		noResult: "Aucun resultat."
+		noResult: "Aucun resultat.",
+		checkedItem: "Sélectionné",
+		checkedItems: "Sélectionnés",
+		notCheckedItem: "Non sélectionné",
+		notCheckedItems: "Non sélectionnés",
+		unselectAll: "Tout désélectionner",
+		selectAll: "Tout sélectionner"
 	}
 };
 const form = {

package/dist/components/mg-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = "/**\n * A11Y\n */\n.sr-only {\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n}\n\n*:focus:not(:focus-visible) {\n  outline: none;\n}\n\n@media (prefers-reduced-motion) {\n  .mg-a11y-animation {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n.mg-details {\n  container: mg-details/inline-size;\n}\n.mg-details summary {\n  display: flex;\n  align-items: baseline;\n  cursor: pointer;\n}\n.mg-details__toggle {\n  margin-left: 1.5rem;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  gap: 0.6rem;\n  min-height: calc(var(--font-size) * var(--line-height));\n}\n.mg-details__details {\n  margin-top: var(--mg-details-spacing);\n}\n\n@container mg-details (max-width: 60rem) {\n  .mg-details__toggle span {\n    border: 0 !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    -webkit-clip-path: inset(50%) !important;\n    clip-path: inset(50%) !important;\n    height: 1px !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n    white-space: nowrap !important;\n  }\n}";
+const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-details__toggle>span{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/mg-input-checkbox-paginated.d.ts

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

package/dist/components/mg-input-checkbox-paginated.js

@@ -0,0 +1,6 @@
+import { a as MgInputCheckboxPaginated$1, d as defineCustomElement$1 } from './mg-input-checkbox-paginated2.js';
+
+const MgInputCheckboxPaginated = MgInputCheckboxPaginated$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgInputCheckboxPaginated, defineCustomElement };