@mgdis/mg-components 5.0.0 → 5.1.0

package/dist/types/components/atoms/mg-divider/mg-divider.d.ts

@@ -0,0 +1,15 @@
+export declare class MgDivider {
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Define component size
+   */
+  size: 'regular' | 'full';
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/atoms/mg-tooltip/doc/mg-tooltip.stories.d.ts

@@ -6,15 +6,9 @@ declare const _default: {
   };
   argTypes: {
     placement: {
-      options: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
     };
   };
 };

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts

@@ -1,11 +1,3 @@
-/**
- * List of all possibles placements
- */
-export declare const placements: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
-/**
- * Placement type from placements
- */
-export declare type Placement = typeof placements[number];
 export declare enum Guard {
   FOCUS = "focus",
   HOVER_TOOLTIP_ELEMENT = "hoverTooltipGuard",

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from './mg-tooltip.conf';
+import { Placement } from '@popperjs/core';
 export declare class MgTooltip {
   /************
    * Internal *

package/dist/types/components/molecules/mg-details/mg-details.d.ts

@@ -16,6 +16,10 @@ export declare class MgDetails {
    */
   toggleOpened: string;
   validateTitles(newValue: string): void;
+  /**
+   * Hide summary element
+   */
+  hideSummary: boolean;
   /**
    * Define if details are diplayed
    */

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

@@ -4,6 +4,7 @@ export declare class MgModal {
   /************
    * Internal *
    ************/
+  private modalFocusableElements;
   private classHide;
   private closeButtonId;
   private titleId;
@@ -60,6 +61,7 @@ export declare class MgModal {
    * @returns {void}
    */
   handleKeyDown(event: KeyboardEvent): void;
+  private setFocus;
   /*************
    * Handlers *
    *************/
@@ -78,6 +80,12 @@ export declare class MgModal {
    * @returns {void}
    */
   componentWillLoad(): void;
+  /**
+   * Add observer on component to set focus when displayed
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
   /**
    * Render
    *

package/dist/types/components/molecules/mg-popover/doc/mg-popover.stories.d.ts

@@ -12,15 +12,9 @@ declare const _default: {
   };
   argTypes: {
     placement: {
-      options: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
     };
   };
 };

package/dist/types/components/molecules/mg-popover/mg-popover.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from './mg-popover.conf';
+import { Placement } from '@popperjs/core';
 export declare class MgPopover {
   /************
    * Internal *

package/dist/types/components.d.ts

@@ -12,9 +12,8 @@ import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
-import { Placement } from "./components/molecules/mg-popover/mg-popover.conf";
+import { Placement } from "@popperjs/core";
 import { TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
-import { Placement as Placement1 } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export namespace Components {
     interface MgBadge {
         /**
@@ -47,6 +46,10 @@ export namespace Components {
           * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
          */
         "form": string;
+        /**
+          * Set button to full-width
+         */
+        "fullWidth": boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
@@ -68,6 +71,8 @@ export namespace Components {
          */
         "variant": VariantType;
     }
+    interface MgCard {
+    }
     interface MgCharacterLeft {
         /**
           * Sets the characters to count
@@ -87,6 +92,10 @@ export namespace Components {
           * Define if details are diplayed
          */
         "expanded": boolean;
+        /**
+          * Hide summary element
+         */
+        "hideSummary": boolean;
         /**
           * Displayed title when details are closed
          */
@@ -96,6 +105,12 @@ export namespace Components {
          */
         "toggleOpened": string;
     }
+    interface MgDivider {
+        /**
+          * Define component size
+         */
+        "size": 'regular' | 'full';
+    }
     interface MgForm {
         /**
           * Define if form is disabled
@@ -1007,7 +1022,7 @@ export namespace Components {
         /**
           * Tooltip placement
          */
-        "placement": Placement1;
+        "placement": Placement;
     }
 }
 export interface MgDetailsCustomEvent<T> extends CustomEvent<T> {
@@ -1091,6 +1106,12 @@ declare global {
         prototype: HTMLMgButtonElement;
         new (): HTMLMgButtonElement;
     };
+    interface HTMLMgCardElement extends Components.MgCard, HTMLStencilElement {
+    }
+    var HTMLMgCardElement: {
+        prototype: HTMLMgCardElement;
+        new (): HTMLMgCardElement;
+    };
     interface HTMLMgCharacterLeftElement extends Components.MgCharacterLeft, HTMLStencilElement {
     }
     var HTMLMgCharacterLeftElement: {
@@ -1103,6 +1124,12 @@ declare global {
         prototype: HTMLMgDetailsElement;
         new (): HTMLMgDetailsElement;
     };
+    interface HTMLMgDividerElement extends Components.MgDivider, HTMLStencilElement {
+    }
+    var HTMLMgDividerElement: {
+        prototype: HTMLMgDividerElement;
+        new (): HTMLMgDividerElement;
+    };
     interface HTMLMgFormElement extends Components.MgForm, HTMLStencilElement {
     }
     var HTMLMgFormElement: {
@@ -1232,8 +1259,10 @@ declare global {
     interface HTMLElementTagNameMap {
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
+        "mg-card": HTMLMgCardElement;
         "mg-character-left": HTMLMgCharacterLeftElement;
         "mg-details": HTMLMgDetailsElement;
+        "mg-divider": HTMLMgDividerElement;
         "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
         "mg-illustrated-message": HTMLMgIllustratedMessageElement;
@@ -1289,6 +1318,10 @@ declare namespace LocalJSX {
           * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
          */
         "form"?: string;
+        /**
+          * Set button to full-width
+         */
+        "fullWidth"?: boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
@@ -1310,6 +1343,8 @@ declare namespace LocalJSX {
          */
         "variant"?: VariantType;
     }
+    interface MgCard {
+    }
     interface MgCharacterLeft {
         /**
           * Sets the characters to count
@@ -1329,6 +1364,10 @@ declare namespace LocalJSX {
           * Define if details are diplayed
          */
         "expanded"?: boolean;
+        /**
+          * Hide summary element
+         */
+        "hideSummary"?: boolean;
         /**
           * Emmited event when expanded change
          */
@@ -1336,11 +1375,17 @@ declare namespace LocalJSX {
         /**
           * Displayed title when details are closed
          */
-        "toggleClosed"?: string;
+        "toggleClosed": string;
         /**
           * Displayed title when details are opened
          */
-        "toggleOpened"?: string;
+        "toggleOpened": string;
+    }
+    interface MgDivider {
+        /**
+          * Define component size
+         */
+        "size"?: 'regular' | 'full';
     }
     interface MgForm {
         /**
@@ -2319,13 +2364,15 @@ declare namespace LocalJSX {
         /**
           * Tooltip placement
          */
-        "placement"?: Placement1;
+        "placement"?: Placement;
     }
     interface IntrinsicElements {
         "mg-badge": MgBadge;
         "mg-button": MgButton;
+        "mg-card": MgCard;
         "mg-character-left": MgCharacterLeft;
         "mg-details": MgDetails;
+        "mg-divider": MgDivider;
         "mg-form": MgForm;
         "mg-icon": MgIcon;
         "mg-illustrated-message": MgIllustratedMessage;
@@ -2355,8 +2402,10 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
+            "mg-card": LocalJSX.MgCard & JSXBase.HTMLAttributes<HTMLMgCardElement>;
             "mg-character-left": LocalJSX.MgCharacterLeft & JSXBase.HTMLAttributes<HTMLMgCharacterLeftElement>;
             "mg-details": LocalJSX.MgDetails & JSXBase.HTMLAttributes<HTMLMgDetailsElement>;
+            "mg-divider": LocalJSX.MgDivider & JSXBase.HTMLAttributes<HTMLMgDividerElement>;
             "mg-form": LocalJSX.MgForm & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
             "mg-illustrated-message": LocalJSX.MgIllustratedMessage & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;

package/dist/types/utils/components.utils.d.ts

@@ -5,7 +5,7 @@
  * @param {number} length ID length
  * @returns {string} ID
  */
-export declare function createID(prefix?: string, length?: number): string;
+export declare const createID: (prefix?: string, length?: number) => string;
 /**
  * Class to manage component classlist
  * Set() are not working when imported in project
@@ -47,7 +47,7 @@ export declare class ClassList {
  * @param {string[]} items items to check
  * @returns {boolean} all items are string
  */
-export declare function allItemsAreString(items: string[]): boolean;
+export declare const allItemsAreString: (items: string[]) => boolean;
 /**
  * Check if element is a heading
  *
@@ -55,4 +55,8 @@ export declare function allItemsAreString(items: string[]): boolean;
  * @param {string[]} tagNames allowed tag names list
  * @returns {boolean} element is a heading
  */
-export declare function isTagName(element: Element, tagNames: string[]): boolean;
+export declare const isTagName: (element: Element, tagNames: string[]) => boolean;
+/**
+ * Focusable elements query selector
+ */
+export declare const focusableElements = "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.18.0",
+    "@stencil/core": "^2.18.1",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
@@ -70,13 +70,14 @@
     "eslint-plugin-jsdoc": "^38.0.6",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.6.6",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^13.0.0",
     "jsx-dom": "^8.0.1-beta.1",
+    "mutation-observer": "^1.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "puppeteer": "^13.3.2",

package/dist/cjs/index-179621c8.js

@@ -1,244 +0,0 @@
-'use strict';
-
-/**
- * Create random ID
- *
- * @param {string} prefix  add prefix to created ID
- * @param {number} length ID length
- * @returns {string} ID
- */
-function createID(prefix = '', length = 10) {
-  let ID = '';
-  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  const charsLength = chars.length;
-  for (let i = 0; i < length; i++) {
-    ID += chars.charAt(Math.floor(Math.random() * charsLength));
-  }
-  return (prefix !== '' ? `${prefix}-` : '') + ID;
-}
-/**
- * Class to manage component classlist
- * Set() are not working when imported in project
- */
-class ClassList {
-  constructor(classlist = []) {
-    /**
-     * Add class
-     *
-     * @param {string} className class name to add
-     * @returns {void}
-     */
-    this.add = (className) => {
-      if (!this.has(className)) {
-        this.classes.push(className);
-      }
-    };
-    /**
-     * Delete class
-     *
-     * @param {string} className class name to delete
-     * @returns {void}
-     */
-    this.delete = (className) => {
-      const index = this.classes.indexOf(className);
-      if (index > -1) {
-        this.classes.splice(index, 1);
-      }
-    };
-    /**
-     * Check if class exist in list
-     *
-     * @param {string} className class name to check
-     * @returns {boolean} class name is in the list
-     */
-    this.has = (className) => {
-      return this.classes.includes(className);
-    };
-    /**
-     * Join classes seperated by spaces
-     *
-     * @returns {string} joined values
-     */
-    this.join = () => {
-      return this.classes.join(' ');
-    };
-    this.classes = classlist;
-  }
-}
-/**
- * Check if all items are string
- *
- * @param {string[]} items items to check
- * @returns {boolean} all items are string
- */
-function allItemsAreString(items) {
-  return items && items.every(item => typeof item === 'string');
-}
-/**
- * Check if element is a heading
- *
- * @param {Element} element slotted element
- * @param {string[]} tagNames allowed tag names list
- * @returns {boolean} element is a heading
- */
-function isTagName(element, tagNames) {
-  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
-}
-
-const errors$1 = {
-	required: "This field is required.",
-	date: {
-		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
-		min: "The date cannot be earlier than {min}",
-		max: "The date cannot be later than {max}",
-		minMax: "The date must be between {min} and {max}"
-	},
-	numeric: {
-		min: "The value cannot be less than {min}",
-		max: "The value cannot be greater than {max}",
-		minMax: "The value must be between {min} et {max}"
-	}
-};
-const nbCharLeft$1 = "{counter} characters left.";
-const input$1 = {
-	select: {
-		placeholder: "Select a value"
-	}
-};
-const form$1 = {
-	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
-	allRequired: "All fields are required"
-};
-const message$1 = {
-	closeButton: "Close message"
-};
-const modal$1 = {
-	closeButton: "Close modal"
-};
-const pagination$1 = {
-	label: "Pagination",
-	page: "page",
-	pages: "pages",
-	nextPage: "Next page",
-	previousPage: "Previous page",
-	selectPage: "Select the page to display."
-};
-const panel$1 = {
-	editLabel: "Edit section title."
-};
-const general$1 = {
-	confirm: "Confirm",
-	cancel: "Cancel",
-	close: "Close",
-	next: "next",
-	previous: "previous"
-};
-const en = {
-	errors: errors$1,
-	nbCharLeft: nbCharLeft$1,
-	input: input$1,
-	form: form$1,
-	message: message$1,
-	modal: modal$1,
-	pagination: pagination$1,
-	panel: panel$1,
-	general: general$1
-};
-
-const errors = {
-	required: "Ce champ est obligatoire.",
-	date: {
-		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
-		min: "La date ne peut pas être antérieure au {min}",
-		max: "La date ne peut pas être postérieure au {max}",
-		minMax: "La date doit être comprise entre le {min} et le {max}"
-	},
-	numeric: {
-		min: "La valeur ne peut pas être inférieure à {min}",
-		max: "La valeur ne peut pas être supérieure à {max}",
-		minMax: "La valeur doit être comprise entre {min} et {max}"
-	}
-};
-const nbCharLeft = "{counter} caractères disponibles.";
-const input = {
-	select: {
-		placeholder: "Sélectionnez une valeur"
-	}
-};
-const form = {
-	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
-	allRequired: "Tous les champs sont obligatoires"
-};
-const message = {
-	closeButton: "Fermer le message"
-};
-const modal = {
-	closeButton: "Fermer la modale"
-};
-const pagination = {
-	label: "Pagination",
-	page: "page",
-	pages: "pages",
-	nextPage: "Page suivante",
-	previousPage: "Page précédente",
-	selectPage: "Sélectionner la page à afficher."
-};
-const panel = {
-	editLabel: "Modifier le titre de la section."
-};
-const general = {
-	confirm: "Valider",
-	cancel: "Annuler",
-	close: "Fermer",
-	next: "suivant",
-	previous: "précédent"
-};
-const fr = {
-	errors: errors,
-	nbCharLeft: nbCharLeft,
-	input: input,
-	form: form,
-	message: message,
-	modal: modal,
-	pagination: pagination,
-	panel: panel,
-	general: general
-};
-
-const defaultLocale = 'en';
-const messages = { en, fr };
-/**
- * Get locale
- *
- * @param {HTMLElement} element element that needs to know the locale to use
- * @returns {string} locale
- */
-const getLocale = (element) => {
-  var _a;
-  return ((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang) || navigator.language || defaultLocale;
-};
-/**
- * Get Intl object
- * We load the defined locale but for now we only support the first subtag for messages
- *
- * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: unknown }} messages object
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const initLocales = (element) => {
-  // Get local
-  const locale = getLocale(element);
-  // Only keep first subtag
-  const localeSubtag = locale.split('-').shift();
-  // Return
-  return {
-    locale,
-    messages: messages[localeSubtag] || messages[defaultLocale],
-  };
-};
-
-exports.ClassList = ClassList;
-exports.allItemsAreString = allItemsAreString;
-exports.createID = createID;
-exports.initLocales = initLocales;
-exports.isTagName = isTagName;