@mgdis/mg-components 5.10.0 → 5.11.0

package/dist/mg-components/p-b14be68b.js

@@ -0,0 +1 @@
+const e=(e,a,t)=>new Intl.NumberFormat(a,{style:"currency",currency:t}).format(e),a=(e,a)=>new Intl.NumberFormat(a).format(e),t=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,n=(e,a)=>"string"==typeof e&&""!==e&&t.test(e)?new Intl.DateTimeFormat(a).format(new Date(e)):"",s={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"},checkbox:{selectedValues:"{nb} selected values",selectedValue:"{nb} selected value",editButton:"Edit",selectButton:"Select values",showButton:"Show"}},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"},checkbox:{selectedValues:"{nb} valeurs selectionnées",selectedValue:"{nb} valeur selectionnée",editButton:"Modifier",selectButton:"Sélectionner des valeurs",showButton:"Voir"}},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"}}},r=e=>((e,a)=>{const t=e.closest("[lang]"),n=Intl.NumberFormat.supportedLocalesOf(null==t?void 0:t.lang),s=n.length>0?n[0]:navigator.language||"en",r=s.split("-").shift();return{locale:s,messages:a[r]||a.en}})(e,s);var i;!function(e){e.VERTICAL="vertical",e.HORIZONTAL="horizontal"}(i||(i={}));const l=["regular","medium","large"];export{i as D,e as a,a as b,t as d,r as i,n as l,l as s}

package/dist/mg-components/{p-a56a3157.entry.js → p-d3ed97d3.entry.js}

@@ -1 +1 @@
-import{r as t,h as i,H as s,g as e}from"./p-8fbc0d87.js";import{i as o,D as h}from"./p-73156ac9.js";var n;!function(t){t.BASE_INDEX="data-overflow-base-index",t.PROXY_INDEX="data-overflow-proxy-index"}(n||(n={}));class r{constructor(t,i){this.element=t,this.render=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.run=t=>{void 0===this._moreElement&&(this._moreElement=this.render(),this._baseChildren=this.getInteractiveItems(this.element),(()=>"MG-ITEM-MORE"===this._moreElement.nodeName)()&&(this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))),this._baseChildren.forEach(((t,i)=>{t.setAttribute(n.BASE_INDEX,`${i}`),this._proxyChildren[i].setAttribute(n.PROXY_INDEX,`${i}`)}))),void 0!==t&&this.updateDisplayedItems(t)},this.getInteractiveItems=t=>{var i;return((null===(i=t.children)||void 0===i?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))},this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=null!==i.previousItem&&null!==i.previousItem.getAttribute("hidden");this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e),i.previousItem=s}))},this.isOverflowElement=(t,i,s)=>null!==i.previousElementSibling&&!this.isMoreElement(i)&&(this.isMoreElement(i.nextElementSibling)?t>s:t+this._moreElement.offsetWidth>s),this.isMoreElement=t=>"MG-ITEM-MORE"===t.nodeName,this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(n.BASE_INDEX));this.isMoreElement(t)?this.toggleElement(this._moreElement,i):s>=0&&(this.toggleElement(t,i),this.toggleElement(this._proxyChildren[s],!i))},this.toggleElement=(t,i)=>{i?t.setAttribute("hidden",""):t.removeAttribute("hidden")},this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))},void 0===this._resizeObserver&&(this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))})),this._resizeObserver.observe(this.element)),this.run()}}const a=class{constructor(i){t(this,i),this.name="mg-item-more",this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(!0))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));return Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{i[s].shadowRoot.querySelector("a, button").click()})),""!==t.id.trim()&&(t.id=`${t.id}-proxy`),i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))})),this.element},this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1},this.size=void 0,this.parentMenu=void 0}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.moreLabel)}validateSize(t){if(t&&"string"!=typeof t)throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu,this.parentMenu=this.element.closest("mg-menu"),this.menuItems=Array.from(this.parentMenu.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new r(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"menuitem","aria-haspopup":"true"},i("mg-menu-item",{"data-overflow-more":!0,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};a.style=".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}}:host{display:flex}";export{a as mg_item_more}
+import{r as t,h as i,H as s,g as e}from"./p-3bf533f7.js";import{i as o,D as h}from"./p-b14be68b.js";var n;!function(t){t.BASE_INDEX="data-overflow-base-index",t.PROXY_INDEX="data-overflow-proxy-index"}(n||(n={}));class r{constructor(t,i){this.element=t,this.render=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.run=t=>{void 0===this._moreElement&&(this._moreElement=this.render(),this._baseChildren=this.getInteractiveItems(this.element),(()=>"MG-ITEM-MORE"===this._moreElement.nodeName)()&&(this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))),this._baseChildren.forEach(((t,i)=>{t.setAttribute(n.BASE_INDEX,`${i}`),this._proxyChildren[i].setAttribute(n.PROXY_INDEX,`${i}`)}))),void 0!==t&&this.updateDisplayedItems(t)},this.getInteractiveItems=t=>{var i;return((null===(i=t.children)||void 0===i?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))},this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=null!==i.previousItem&&null!==i.previousItem.getAttribute("hidden");this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e),i.previousItem=s}))},this.isOverflowElement=(t,i,s)=>null!==i.previousElementSibling&&!this.isMoreElement(i)&&(this.isMoreElement(i.nextElementSibling)?t>s:t+this._moreElement.offsetWidth>s),this.isMoreElement=t=>"MG-ITEM-MORE"===t.nodeName,this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(n.BASE_INDEX));this.isMoreElement(t)?this.toggleElement(this._moreElement,i):s>=0&&(this.toggleElement(t,i),this.toggleElement(this._proxyChildren[s],!i))},this.toggleElement=(t,i)=>{i?t.setAttribute("hidden",""):t.removeAttribute("hidden")},this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))},void 0===this._resizeObserver&&(this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))})),this._resizeObserver.observe(this.element)),this.run()}}const a=class{constructor(i){t(this,i),this.name="mg-item-more",this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(!0))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));return Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{i[s].shadowRoot.querySelector("a, button").click()})),""!==t.id.trim()&&(t.id=`${t.id}-proxy`),i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))})),this.element},this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1},this.size=void 0,this.parentMenu=void 0}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.moreLabel)}validateSize(t){if(t&&"string"!=typeof t)throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu,this.parentMenu=this.element.closest("mg-menu"),this.menuItems=Array.from(this.parentMenu.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new r(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"menuitem","aria-haspopup":"true"},i("mg-menu-item",{"data-overflow-more":!0,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};a.style=".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}}:host{display:flex}";export{a as mg_item_more}

package/dist/mg-components/styles/reset-mg-card-slotted-variables.scss

@@ -6,5 +6,6 @@
     --mg-card-background: var(--mg-card-background-default);
     --mg-card-box-shadow: var(--mg-card-box-shadow-default);
     --mg-card-max-width: unset;
+    --mg-card-min-width: unset;
   }
 }

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

@@ -32,15 +32,14 @@ export declare class MgBadge {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -69,37 +69,33 @@ export declare class MgButton {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Emmited event when disabled change
    */
   disabledChange: EventEmitter<MgButton['disabled']>;
   /**
    * Trigger actions onClick event
-   * @param {MouseEvent} event click event
-   * @returns {void}
+   * @param event - click event
    */
   private handleClick;
   /**
    * Handle onKeydown event
-   * @param {KeyboardEvent} event keyboard event
-   * @returns {void}
+   * @param event - keyboard event
    */
   private handleKeydown;
   /**
    * Handle onKeyup event
-   * @param {KeyboardEvent} event keyboard event
-   * @returns {void}
+   * @param event - keyboard event
    */
   private handleKeyup;
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
-   * @returns {HTMLElement} html element
+   * @returns html element
    */
   render(): HTMLElement;
 }

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

@@ -11,24 +11,21 @@ export declare class MgCard {
    *************/
   /**
    * Define variant prop
-   * Default: undefined
    */
   variant: undefined | VariantType;
   validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']): void;
   /**
    * Define variantStyle prop
-   * Default: undefined
    */
   variantStyle: undefined | VariantStyleType;
   validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']): void;
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Methode to set default varianStyle props
    * needeed has stencil doesn't know that props is mutated when updated in prop watcher
-   * @returns {void}
    */
   private setDefaultVariantStyle;
   /*************
@@ -36,12 +33,11 @@ export declare class MgCard {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts

@@ -29,12 +29,11 @@ export declare class MgCharacterLeft {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -8,7 +8,7 @@ export declare class MgDivider {
   size: 'regular' | 'full';
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -33,26 +33,24 @@ export declare class MgIcon {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * getIcon
-   * @returns {HTMLElement} icon html
+   * @returns icon html
    */
   private getIcon;
   /**
    * Method to set default varianStyle props
    * needeed has stencil doesn't know that props is mutated when updated in prop watcher
-   * @returns {void}
    */
   private setDefaultVariantStyle;
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -22,12 +22,11 @@ export declare class MgInputTitle {
    *************/
   /**
    * Init tag name
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML element
    */
   render(): HTMLElement;
 }

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

@@ -31,14 +31,13 @@ export declare class MgTag {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /*************
    * Methods *
    *************/
   /**
    * Validate the given textContent
-   * @param {string} textContent html element textContent property
-   * @returns {void}
+   * @param textContent - html element textContent property
    */
   private validateTextContent;
   /*************
@@ -46,12 +45,11 @@ export declare class MgTag {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -40,56 +40,48 @@ export declare class MgTooltip {
   disabled: boolean;
   /**
    * Show tooltip
-   * @returns {void}
    */
   private show;
   /**
    * Hide tooltip
-   * @returns {void}
    */
   private hide;
   /**
    * Check if clicked outside of component and hidde tooltip
-   * @param {MouseEvent} event mouse event
-   * @returns {void}
+   * @param event - mouse event
    */
   private clickOutside;
   /**
    * Check if 'Escape' key is pressed of component and hidde tooltip
-   * @param {KeyboardEvent} event keyboard event
-   * @returns {void}
+   * @param event - keyboard event
    */
   private pressEscape;
   /**
    * Method to set display prop
-   * @param {boolean} newValue display prop new value
-   * @param {boolean} condition additionnal condition to apply display prop newValue
-   * @returns {void}
+   * @param newValue - display prop new value
+   * @param condition - additionnal condition to apply display prop newValue
    */
   private setDisplay;
   /**
    * Action for tooltip element and tooltiped element mouse listener
-   * @param {Guard} elementGuard tooltip element guard
-   * @param {boolean} isMouseenter mouseenter validation
-   * @param {Guard} conditionalGuard guard condition
-   * @returns {void}
+   * @param elementGuard -  tooltip element guard
+   * @param isMouseenter - mouseenter validation
+   * @param conditionalGuard - guard condition
    */
   private tooltipMouseListenerAction;
   /**
    * Method to reset guard value
-   * @returns {void}
    */
   private resetGuard;
   /**
    * Update slot content when it is a mg-button
-   * @param {HTMLMgButtonElement} mgButton slotted mg-button
-   * @returns {void}
+   * @param mgButton - slotted mg-button
    */
   private setMgButtonWrapper;
   /**
    * Init tooltip
-   * @param {HTMLElement} slotElement slotted element
-   * @param {HTMLElement} interactiveElement interactive element
+   * @param slotElement - slotted element
+   * @param interactiveElement - interactive element
    */
   private initTooltip;
   /*************
@@ -97,19 +89,21 @@ export declare class MgTooltip {
    *************/
   /**
    * set variables
-   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
-   * @returns {void}
    */
   componentDidLoad(): void;
+  /**
+   * update popper position after props change on component did update hook to benefit from render ended
+   */
+  componentDidUpdate(): void;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

package/dist/types/components/molecules/inputs/MgInput.conf.d.ts

@@ -1,7 +1,8 @@
 /**
  * Possible input width
  */
-export type Width = 2 | 4 | 16 | 'full';
+export declare const widths: readonly [2, 4, 16, "full"];
+export type Width = (typeof widths)[number];
 /**
  * Possible Input types
  */

package/dist/types/components/molecules/inputs/MgInput.d.ts

@@ -6,7 +6,7 @@ import { ClassList } from '../../../utils/components.utils';
  */
 interface MgInputProps {
   identifier: string;
-  classList: ClassList;
+  classCollection: ClassList;
   label: string;
   labelOnTop: boolean;
   labelHide: boolean;
@@ -24,10 +24,10 @@ interface MgInputProps {
 }
 /**
  * Get input template
- * @param {MgInputProps} props MgInput Interface Props
- * @param {VNode[]} children Represent scoped elements
- * @param {FunctionalUtilities} utils Stencil.js utils
- * @returns {VNode[]} input template
+ * @param props - MgInput Interface Props
+ * @param children - Represent scoped elements
+ * @param utils - Stencil.js utils
+ * @returns input template
  */
 export declare const MgInput: FunctionalComponent<MgInputProps>;
 export {};

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

@@ -17,3 +17,11 @@ export type CheckboxValue = {
   value: boolean | null;
   disabled?: boolean;
 };
+/**
+ * List of all availables checkbox type
+ */
+export declare const checkboxTypes: readonly ["checkbox", "multi"];
+/**
+ * ChecboxType from checkbox types
+ */
+export type CheckboxType = (typeof checkboxTypes)[number];

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

@@ -1,13 +1,15 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxValue } from './mg-input-checkbox.conf';
+import { CheckboxItem, CheckboxType, CheckboxValue } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox {
   /************
    * Internal *
    ************/
   private inputs;
+  private popover;
   private messages;
   private hasDisplayedError;
+  private baseClassName;
   /**************
    * Decorators *
    **************/
@@ -22,6 +24,11 @@ export declare class MgInputCheckbox {
    */
   value: CheckboxValue[];
   validateValue(newValue: MgInputCheckbox['value']): void;
+  /**
+   * Define checkbox type
+   */
+  type: CheckboxType;
+  validateType(newValue: MgInputCheckbox['type']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -60,6 +67,7 @@ export declare class MgInputCheckbox {
    */
   disabled: boolean;
   handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+  validateDisabled(newValue: MgInputCheckbox['disabled']): void;
   /**
    * Add a tooltip message next to the input
    */
@@ -79,7 +87,7 @@ export declare class MgInputCheckbox {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Error message to display
    */
@@ -98,42 +106,67 @@ export declare class MgInputCheckbox {
   inputValid: EventEmitter<MgInputCheckbox['valid']>;
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
    * Handle input event
-   * @param {InputEvent} event input event
+   * @param event - input event
    */
   private handleInput;
+  /**
+   * Keyboard handler
+   * @param event - to trak "tab" key
+   */
+  private handleKeydown;
   /**
    * Handle blur event
    */
   private handleBlur;
   /**
    * get invalid element
-   * @returns {HTMLInputElement} element
+   * @returns element
    */
   private getInvalidElement;
   /**
    * Check if input is valid
    */
   private checkValidity;
+  /**
+   * Render button text
+   * @param selectedValuesNb - nb of selected values
+   * @returns translated message
+   */
+  private renderButtonText;
   /**
    * Set input error message
    */
   private setErrorMessage;
+  /**
+   * Method to get mg-popover identifier
+   * @returns MgPopover identifier
+   */
+  private getMgPopoverIdentifier;
   /*************
    * Lifecycle *
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * render checkbox multi element
+   * @returns html element
+   */
+  private renderCheckboxMulti;
+  /**
+   * Render checkbox element
+   * @returns HTML Element
+   */
+  private renderCheckboxes;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -84,7 +84,7 @@ export declare class MgInputDate {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Error message to display
    */
@@ -99,7 +99,6 @@ export declare class MgInputDate {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
@@ -116,12 +115,11 @@ export declare class MgInputDate {
   private checkValidity;
   /**
    * get input error code
-   * @returns {null | InputError} error code
+   * @returns error code
    */
   private getInputError;
   /**
    * Check input errors
-   * @returns {void}
    */
   private setErrorMessage;
   /*************
@@ -129,12 +127,12 @@ export declare class MgInputDate {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -115,7 +115,7 @@ export declare class MgInputNumeric {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Error message to display
    */
@@ -134,54 +134,47 @@ export declare class MgInputNumeric {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
    * Displayed value in input
    * Change on focus/blur
-   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
+   * @returns display value
    */
   private displayValue;
   /**
    * Handle input event
-   * @returns {void}
    */
   private handleInput;
   /**
    * Handle focus event
-   * @returns {void}
    */
   private handleFocus;
   /**
    * Handle blur event
-   * @returns {void}
    */
   private handleBlur;
   /**
    * Check if input is valid
-   * @returns {void}
    */
   private checkValidity;
   /**
    * Set input error message
-   * @returns {void}
    */
   private setErrorMessage;
   /**
    * Get input error code
-   * @returns {null | InputError} error code
+   * @returns error code
    */
   private getInputError;
   /**
    * Format value based on type
-   * @param {number} value value to format
-   * @returns {string} formated local value
+   * @param value - value to format
+   * @returns formated local value
    */
   private formatValue;
   /**
    * Validate append slot
-   * @returns {void}
    */
   private validateAppendSlot;
   /*************
@@ -189,12 +182,12 @@ export declare class MgInputNumeric {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }

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

@@ -82,7 +82,7 @@ export declare class MgInputPassword {
   /**
    * Component classes
    */
-  classList: ClassList;
+  classCollection: ClassList;
   /**
    * Error message to display
    */
@@ -97,7 +97,6 @@ export declare class MgInputPassword {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
@@ -121,12 +120,12 @@ export declare class MgInputPassword {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render(): HTMLElement;
 }