@mgdis/mg-components 5.7.0 → 5.8.1

package/dist/mg-components/p-367f92d2.js

@@ -0,0 +1 @@
+const e=(e,a,n)=>new Intl.NumberFormat(a,{style:"currency",currency:n}).format(e),a=(e,a)=>new Intl.NumberFormat(a).format(e),n=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,t=(e,a)=>"string"==typeof e&&""!==e&&n.test(e)?new Intl.DateTimeFormat(a).format(new Date(e)):"",r={en:{errors:{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}"}},nbCharLeft:"{counter} characters left.",input:{select:{placeholder:"Select a value"}},form:{required:'Fields with a <strong class="is-asterisk">*</strong> are required',requiredSingle:'Field with a <strong class="is-asterisk">*</strong> is required',allRequired:"All fields are required",allRequiredSingle:"The field is required"},message:{closeButton:"Close message"},modal:{closeButton:"Close modal"},pagination:{label:"Pagination",page:"page",pages:"pages",nextPage:"Next page",previousPage:"Previous page",selectPage:"Select the page to display."},panel:{editLabel:"Edit section title."},skipLinks:{navLabel:"Quick access"},general:{confirm:"Confirm",cancel:"Cancel",close:"Close",next:"next",previous:"previous"},plusMenu:{moreLabel:"Additional menu",badgeLabel:"Include notification(s)"},actionMore:{label:"Actions"}},fr:{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}"}},nbCharLeft:"{counter} caractères disponibles.",input:{select:{placeholder:"Sélectionnez une valeur"}},form:{required:'Les champs marqués d\'un <strong class="is-asterisk">*</strong> sont obligatoires',requiredSingle:'Le champ marqué d\'un <strong class="is-asterisk">*</strong> est obligatoire',allRequired:"Tous les champs sont obligatoires",allRequiredSingle:"Le champ est obligatoire"},message:{closeButton:"Fermer le message"},modal:{closeButton:"Fermer la modale"},pagination:{label:"Pagination",page:"page",pages:"pages",nextPage:"Page suivante",previousPage:"Page précédente",selectPage:"Sélectionner la page à afficher."},panel:{editLabel:"Modifier le titre de la section."},skipLinks:{navLabel:"Accès rapide"},general:{confirm:"Valider",cancel:"Annuler",close:"Fermer",next:"suivant",previous:"précédent"},plusMenu:{moreLabel:"Menu complémentaire",badgeLabel:"Notification(s) incluse(s)"},actionMore:{label:"Actions"}}},i=e=>((e,a)=>{const n=e.closest("[lang]"),t=Intl.NumberFormat.supportedLocalesOf(null==n?void 0:n.lang),r=t.length>0?t[0]:navigator.language||"en",i=r.split("-").shift();return{locale:r,messages:a[i]||a.en}})(e,r);var s;!function(e){e.VERTICAL="vertical",e.HORIZONTAL="horizontal"}(s||(s={}));const l=["regular","medium","large"];export{s as D,e as a,a as b,n as d,i,t as l,l as s}

package/dist/mg-components/styles/navigation-button.scss

@@ -9,7 +9,7 @@ $navigation-button-column-gap: 1rem;
     .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
     .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
       padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
-      height: calc(#{map.get($size, 'height')});
+      height: #{map.get($size, 'height')};
       &,
       ::slotted([slot='label']),
       ::slotted([slot='metadata']) {

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 import { VariantType, ButtonType } from './mg-button.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgButton {
@@ -69,6 +70,10 @@ export declare class MgButton {
    * Component classes
    */
   classList: ClassList;
+  /**
+   * Emmited event when disabled change
+   */
+  disabledChange: EventEmitter<MgButton['disabled']>;
   /**
    * Trigger actions onClick event
    *

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -21,7 +21,7 @@ export declare class MgInputCheckbox {
    * Required
    */
   value: CheckboxValue[];
-  validateValue(newValue: CheckboxValue[]): void;
+  validateValue(newValue: MgInputCheckbox['value']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -91,11 +91,11 @@ export declare class MgInputCheckbox {
   /**
    * Emitted event when value change
    */
-  valueChange: EventEmitter<CheckboxValue[]>;
+  valueChange: EventEmitter<MgInputCheckbox['value']>;
   /**
    * Emited event when checking validity
    */
-  inputValid: EventEmitter<boolean>;
+  inputValid: EventEmitter<MgInputCheckbox['valid']>;
   /**
    * Public method to display errors
    *

package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts

@@ -20,12 +20,12 @@ export declare class MgInputSelect {
    * Component value
    */
   value: any;
-  handleValue(newValue: any): void;
+  validateValue(newValue: MgInputSelect['value']): void;
   /**
    * Items are the possible options to select
    */
-  items: string[] | SelectOption[];
-  validateItems(newValue: string[] | SelectOption[]): void;
+  items: (string | SelectOption)[];
+  validateItems(newValue: MgInputSelect['items']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -116,7 +116,7 @@ export declare class MgInputSelect {
   /**
    * Emited event when value change
    */
-  valueChange: EventEmitter<any>;
+  valueChange: EventEmitter<MgInputSelect['value']>;
   /**
    * Emited event when checking validity
    */
@@ -129,12 +129,40 @@ export declare class MgInputSelect {
   displayError(): Promise<void>;
   /**
    * Handle input event
+   *
+   * @returns {void}
    */
   private handleInput;
+  /**
+   * Method to compare item.title with input.value
+   *
+   * @param {SelectOption} item item to compare with
+   * @returns {boolean} truthy if input.value is an item
+   */
+  private isInputValue;
+  /**
+   * value props setter
+   *
+   * @param {MgInputSelect['value']} newValue value to update with
+   * @returns {void}
+   */
+  private setValue;
+  /**
+   * Update value from input.value
+   *
+   * @returns {void}
+   */
+  private updateValue;
   /**
    * Handle blur event
    */
   private handleBlur;
+  /**
+   * Input value is disabled
+   *
+   * @returns {boolean} truthy if input value is disabled
+   */
+  private isDisabledValue;
   /**
    * Check if input is valid
    */
@@ -152,6 +180,13 @@ export declare class MgInputSelect {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render option
+   *
+   * @param {SelectOption} option to render
+   * @returns {HTMLElement} render option
+   */
+  private renderOption;
   /**
    * Render
    *

package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts

@@ -1,5 +1,4 @@
-import { MgIcon } from '../../../atoms/mg-icon/mg-icon';
-import { MgMenu } from './mg-menu';
+import { MgItemMore } from '../../mg-item-more/mg-item-more';
 /**
  * Menu direction type
  */
@@ -8,32 +7,9 @@ export declare enum Direction {
   HORIZONTAL = "horizontal"
 }
 /**
- * message type
+ * ItemMore prop type
  */
-export type MessageType = {
-  moreLabel: string;
-  badgeLabel: string;
-};
-/**
- * more item type
- */
-export type MoreItemType = {
-  mgIcon?: {
-    icon: MgIcon['icon'];
-  };
-  slotLabel?: {
-    label?: string;
-    display?: boolean;
-  };
-  size?: MgMenu['size'];
-};
-/**
- * More item type guard
- *
- * @param {unknown} element element to control
- * @returns {boolean} truthy if element is more-item
- */
-export declare const isMoreItem: (element: unknown) => element is MoreItemType;
+export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;
 /**
  * List of all possibles sizes
  */

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

@@ -1,13 +1,12 @@
-import { Direction, MenuSizeType, MoreItemType } from './mg-menu.conf';
+import { Direction } from './mg-menu.conf';
+import type { MenuSizeType, ItemMoreType } from './mg-menu.conf';
 export declare class MgMenu {
   /************
    * Internal *
    ************/
   private readonly name;
-  private messages;
   private menuItems;
   private focusedMenuItem;
-  private overflowBehavior;
   /**************
    * Decorators *
    **************/
@@ -27,11 +26,11 @@ export declare class MgMenu {
   direction: Direction;
   validateDirection(newValue: MgMenu['direction']): void;
   /**
-   * Customize mg-menu "more element"
+   * Customize "mg-item-more" element
    * Used with direction: 'vertical' to manage overflow
    */
-  moreitem: MoreItemType;
-  validateMoreItem(newValue: MgMenu['moreitem']): void;
+  itemmore: ItemMoreType;
+  validateItemMore(newValue: MgMenu['itemmore']): void;
   /**
    * Define mg-menu size
    * Default: 'regular'
@@ -42,11 +41,9 @@ export declare class MgMenu {
    * is this menu a child menu. Used for conditional render.
    */
   isChildMenu: boolean;
-  /**
-   * Define if component manage child overflow
-   * Default: false
-   */
-  hasOverflow: boolean;
+  /*************
+   * Methods *
+   *************/
   /**
    * Close matching menu-item
    *
@@ -55,9 +52,26 @@ export declare class MgMenu {
    * @returns {void}
    */
   private closeMenuItem;
-  /*************
-   * Methods *
-   *************/
+  /**
+   * get mg-item-more element
+   *
+   * @returns {HTMLMgItemMoreElement} mg-item-more element
+   */
+  private getItemMore;
+  /**
+   * get mg-item-more >>> mg-menu-item element
+   *
+   * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+   */
+  private getItemMoreMenuItem;
+  /**
+   * Set item listend
+   *
+   * @param {HTMLMgMenuItemElement} item mg-menu-item element
+   * @param {MgMenu['focusedMenuItem']} index number
+   * @returns {void}
+   */
+  private setItemListener;
   /**
    * Store menu-items on component init and add listeners
    *
@@ -65,11 +79,17 @@ export declare class MgMenu {
    */
   private initMenuItemsListeners;
   /**
-   * render mg-menu-more
+   * Handle item-loaded event on mg-item-more element
+   *
+   * @returns {void}
+   */
+  private handleItemLoaded;
+  /**
+   * render mg-item-more
    *
-   * @returns {HTMLElement} formated mg-menu-item element
+   * @returns {void}
    */
-  private renderMgMenuMore;
+  private renderMgItemMore;
   /*************
    * Lifecycle *
    *************/
@@ -86,23 +106,11 @@ export declare class MgMenu {
    */
   componentDidLoad(): ReturnType<typeof setTimeout>;
   /**
-   * Check add listeners to childs
+   * Add listeners to items
    *
    * @returns {void}
    */
   componentDidRender(): void;
-  /**
-   * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
-   */
-  disconnectedCallback(): void;
-  /**
-   * Render mg-menu-item more element for overflow behavior
-   *
-   * @returns {HTMLElement} rendered mg-menu-item more element
-   */
-  private renderMgMenuItemMore;
   /**
    * Render
    *

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts

@@ -1,3 +1,4 @@
+import { MgMenu } from '../mg-menu/mg-menu';
 /**
  * Available menu-item positions
  */
@@ -14,3 +15,7 @@ export declare enum Status {
   DISABLED = "disabled",
   ACTIVE = "active"
 }
+/**
+ * Direction type
+ */
+export type DirectionType = MgMenu['direction'];

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { MgMenu } from '../mg-menu/mg-menu';
-import { MenuSizeType } from '../mg-menu/mg-menu.conf';
 import { Status } from './mg-menu-item.conf';
+import type { MenuSizeType } from '../mg-menu/mg-menu.conf';
+import type { DirectionType } from './mg-menu-item.conf';
 export declare class MgMenuItem {
   /************
    * Internal *
@@ -20,6 +20,11 @@ export declare class MgMenuItem {
   /************
    * Props *
    ************/
+  /**
+   * Identifier is used to control mg-popover
+   * Default: createID('mg-menu-item');
+   */
+  identifier: string;
   /**
    * Define menu-item href
    * when defined menu-item contain an anchor instead of button
@@ -42,6 +47,10 @@ export declare class MgMenuItem {
    * Emited event when status change
    */
   statusChange: EventEmitter<MgMenuItem['status']>;
+  /**
+   * Emited event when item is loaded
+   */
+  itemLoaded: EventEmitter<void>;
   /**********
    * States *
    *********/
@@ -57,11 +66,16 @@ export declare class MgMenuItem {
   /**
    * Parent menu direction
    */
-  direction: MgMenu['direction'];
+  direction: DirectionType;
+  validateDirection(newValue: MgMenuItem['direction']): void;
   /**
    * Does component is in main menu
    */
   isInMainMenu: boolean;
+  /**
+   * Does element is item-more
+   */
+  isItemMore: boolean;
   /**
    * Does component have children. Default: false.
    */
@@ -92,9 +106,61 @@ export declare class MgMenuItem {
    * Is component contextual direction match the given direction
    *
    * @param {MgMenuItem['direction']} direction in parent menu
+   * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
    * @returns {boolean} true is direction match the direction propertie
    */
   private isDirection;
+  /**
+   * Update displayNotificationBadge
+   * current component notification badge have priority over the slot badge when submenu contain badge
+   *
+   * @returns {void} update displayNotificationBadge value
+   */
+  private updateDisplayNotificationBadge;
+  /**
+   * Method to control if one of component children have active status
+   *
+   * @returns {boolean} truthy if component has active child
+   */
+  private hasActiveChild;
+  /**
+   * Validate slots
+   *
+   * @param {boolean} guard prevent action whith guard. Default: false.
+   * @returns {void}
+   */
+  private validateSlot;
+  /**
+   * Update status
+   *
+   * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+   * @returns {void}
+   */
+  private updateStatus;
+  /**
+   * Init event-listeners
+   *
+   * @returns {void}
+   */
+  private initListeners;
+  /**
+   * Get mg-popover identifier
+   *
+   * @returns {MgPopover['identifier']} generated mg-popover identifier
+   */
+  private getPopoverIdentifier;
+  /**
+   * Render popover clickoutside guard for content slot
+   *
+   * @returns {void}
+   */
+  private updatePopoverGuard;
+  /**
+   * Condition to know if component should display a mg-popover
+   *
+   * @returns {boolean} truthy if component display popover
+   */
+  private displayPopover;
   /************
    * Handlers *
    ************/
@@ -112,19 +178,6 @@ export declare class MgMenuItem {
    * @returns {void}
    */
   private handlePopoverDisplay;
-  /**
-   * Update displayNotificationBadge
-   * current component notification badge have priority over the slot badge when submenu contain badge
-   *
-   * @returns {void} update displayNotificationBadge value
-   */
-  private updateDisplayNotificationBadge;
-  /**
-   * Method to control if one of component children have active status
-   *
-   * @returns {boolean} truthy if component has active child
-   */
-  private hasActiveChild;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts

@@ -0,0 +1,26 @@
+import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import { MgMenu } from '../menu/mg-menu/mg-menu';
+/**
+ * message type
+ */
+export type MessageType = {
+  moreLabel: string;
+  badgeLabel: string;
+};
+/**
+ * SlotLabel prop type
+ */
+export type SlotLabelType = {
+  label?: string;
+  display?: boolean;
+};
+/**
+ * icon prop type
+ */
+export type IconType = {
+  icon: MgIcon['icon'];
+};
+/**
+ * size type
+ */
+export type SizeType = MgMenu['size'];

package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts

@@ -0,0 +1,74 @@
+import type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';
+export declare class MgItemMore {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private messages;
+  private menuItems;
+  private overflowBehavior;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgItemMoreElement;
+  /**
+   * Define icon
+   * Default: {icon: 'ellipsis-vertical'}
+   */
+  icon: IconType;
+  validateIcon(newValue: MgItemMore['icon']): void;
+  /**
+   * Define slot label element
+   * Default: {display: false}
+   */
+  slotlabel: SlotLabelType;
+  validateSlotLabel(newValue: MgItemMore['slotlabel']): void;
+  /**
+   * Define component child menu size.
+   */
+  size: SizeType;
+  validateSize(newValue: MgItemMore['size']): void;
+  /**
+   * Define component parent menu.
+   */
+  parentMenu: HTMLMgMenuElement;
+  /***********
+   * Methods *
+   ***********/
+  /**
+   * render mg-item-more overflow element
+   *
+   * @returns {HTMLMgItemMoreElement} mg-item-more element
+   */
+  private renderMgMenuItemOverflowElement;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Disconnect overflow ResizeObserver
+   *
+   * @returns {void} run overflow resize obeserver disconnexion
+   */
+  disconnectedCallback(): void;
+  /**
+   * Set variables and validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Add overflow behavior
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}