@mgdis/mg-components 5.0.0 → 5.2.0

package/dist/esm/index-7efedd97.js

@@ -1,238 +0,0 @@
-/**
- * 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],
-  };
-};
-
-export { ClassList as C, isTagName as a, allItemsAreString as b, createID as c, initLocales as i };

package/dist/esm/mg-modal.entry.js

@@ -1,124 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-aad0184c.js';
-import { c as createID, C as ClassList, i as initLocales } from './index-7efedd97.js';
-
-const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
-
-const MgModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.componentShow = createEvent(this, "component-show", 7);
-    this.componentHide = createEvent(this, "component-hide", 7);
-    /************
-     * Internal *
-     ************/
-    // Classes
-    this.classHide = 'mg-modal--hide';
-    // IDs
-    this.closeButtonId = '';
-    this.titleId = '';
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-modal');
-    /**
-     * Define if modal has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Define if modal is hidden
-     */
-    this.hide = false;
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
-    /**
-     * Define if component is using content slot
-     */
-    this.hasContent = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-modal']);
-    /*************
-     * Handlers *
-     *************/
-    /**
-     * Handle close button
-     *
-     * @returns {void}
-     */
-    this.handleClose = () => {
-      this.hide = true;
-    };
-  }
-  validateModalTitle(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
-      throw new Error('<mg-modal> prop "modalTitle" is required.');
-    }
-  }
-  validateHide(newValue) {
-    if (newValue) {
-      this.componentHide.emit();
-      this.classList.add(this.classHide);
-      document.body.style.overflow = this.bodyOverflow;
-    }
-    else {
-      this.componentShow.emit();
-      this.classList.delete(this.classHide);
-      document.body.style.overflow = 'hidden';
-    }
-  }
-  /**
-   * Handle 'escape' key down
-   *
-   * @param {KeyboardEvent} event keydown event
-   * @returns {void}
-   */
-  handleKeyDown(event) {
-    // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
-    if (this.closeButton && event.key === 'Escape') {
-      this.hide = true;
-    }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void}
-   */
-  componentWillLoad() {
-    // Store body overflow
-    this.bodyOverflow = document.body.style.overflow;
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // Validate
-    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
-    this.hasContent = this.element.querySelector('[slot="content"]') !== null;
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
-    this.titleId = `${this.identifier}-title`;
-    this.validateModalTitle(this.modalTitle);
-    this.validateHide(this.hide);
-  }
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "modalTitle": ["validateModalTitle"],
-    "hide": ["validateHide"]
-  }; }
-};
-MgModal.style = mgModalCss;
-
-export { MgModal as mg_modal };

package/dist/mg-components/p-5f89600c.js

@@ -1 +0,0 @@
-function e(e="",a=10){let t="";const n="abcdefghijklmnopqrstuvwxyz0123456789",r=n.length;for(let e=0;e<a;e++)t+=n.charAt(Math.floor(Math.random()*r));return(""!==e?`${e}-`:"")+t}class a{constructor(e=[]){this.add=e=>{this.has(e)||this.classes.push(e)},this.delete=e=>{const a=this.classes.indexOf(e);a>-1&&this.classes.splice(a,1)},this.has=e=>this.classes.includes(e),this.join=()=>this.classes.join(" "),this.classes=e}}function t(e){return e&&e.every((e=>"string"==typeof e))}function n(e,a){return a.includes(null==e?void 0:e.tagName.toLowerCase())}const 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',allRequired:"All fields are 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."},general:{confirm:"Confirm",cancel:"Cancel",close:"Close",next:"next",previous:"previous"}},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',allRequired:"Tous les champs sont obligatoires"},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."},general:{confirm:"Valider",cancel:"Annuler",close:"Fermer",next:"suivant",previous:"précédent"}}},s=e=>{const a=(e=>{var a;return(null===(a=e.closest("[lang]"))||void 0===a?void 0:a.lang)||navigator.language||"en"})(e),t=a.split("-").shift();return{locale:a,messages:r[t]||r.en}};export{a as C,n as a,t as b,e as c,s as i}

package/dist/mg-components/p-b60a4c53.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as o,g as a}from"./p-3899d5d2.js";import{c as e,C as s,i as l}from"./p-5f89600c.js";const n=class{constructor(o){t(this,o),this.componentShow=i(this,"component-show",7),this.componentHide=i(this,"component-hide",7),this.classHide="mg-modal--hide",this.closeButtonId="",this.titleId="",this.identifier=e("mg-modal"),this.closeButton=!1,this.hide=!1,this.hasActions=!1,this.hasContent=!1,this.classList=new s(["mg-modal"]),this.handleClose=()=>{this.hide=!0}}validateModalTitle(t){if("string"!=typeof t||""===t.trim())throw new Error('<mg-modal> prop "modalTitle" is required.')}validateHide(t){t?(this.componentHide.emit(),this.classList.add(this.classHide),document.body.style.overflow=this.bodyOverflow):(this.componentShow.emit(),this.classList.delete(this.classHide),document.body.style.overflow="hidden")}handleKeyDown(t){this.closeButton&&"Escape"===t.key&&(this.hide=!0)}componentWillLoad(){this.bodyOverflow=document.body.style.overflow,this.messages=l(this.element).messages,this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.hasContent=null!==this.element.querySelector('[slot="content"]'),this.closeButton&&(this.closeButtonId=`${this.identifier}-close-button`),this.titleId=`${this.identifier}-title`,this.validateModalTitle(this.modalTitle),this.validateHide(this.hide)}render(){return o("section",{role:"dialog",id:this.identifier,class:this.classList.join(),tabindex:"-1","aria-labelledby":this.titleId,"aria-modal":"true","aria-hidden":this.hide},o("article",{class:"mg-modal__dialog"},o("header",{class:"mg-modal__header"},this.closeButton&&o("span",{class:"mg-modal__close-button"},o("mg-button",{identifier:this.closeButtonId,"is-icon":!0,variant:"flat",label:this.messages.modal.closeButton,onClick:this.handleClose},o("mg-icon",{icon:"cross"}))),o("h1",{class:"mg-modal__title",id:this.titleId},this.modalTitle)),this.hasContent&&o("article",{class:"mg-modal__content"},o("slot",{name:"content"})),this.hasActions&&o("footer",{class:"mg-modal__footer"},o("slot",{name:"actions"}))))}get element(){return a(this)}static get watchers(){return{modalTitle:["validateModalTitle"],hide:["validateHide"]}}};n.style=".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";export{n as mg_modal}