@mgdis/mg-components 4.2.1 → 5.1.0

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;

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

@@ -1,130 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-94497267.js');
-const index$1 = require('./index-179621c8.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) {
-    index.registerInstance(this, hostRef);
-    this.componentShow = index.createEvent(this, "component-show", 7);
-    this.componentHide = index.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 = index$1.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 index$1.ClassList(['mg-modal']);
-    /*************
-     * Handlers *
-     *************/
-    /**
-     * Handle close button
-     *
-     * @returns {void}
-     */
-    this.handleClose = () => {
-      this.hide = true;
-    };
-  }
-  validateModalTitle(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-modal> prop "modalTitle" is required.');
-      console.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 = index$1.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 (index.h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("article", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-modal__footer" }, index.h("slot", { name: "actions" }))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "modalTitle": ["validateModalTitle"],
-    "hide": ["validateHide"]
-  }; }
-};
-MgModal.style = mgModalCss;
-
-exports.mg_modal = MgModal;

package/dist/cjs/mg-popover.cjs.entry.js

@@ -1,171 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-94497267.js');
-const index$1 = require('./index-179621c8.js');
-const popper = require('./popper-11d5f714.js');
-
-const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow.sc-mg-popover,.mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>[slot=title],.mg-popover__title .sc-mg-popover-s>[slot=title]{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
-
-const MgPopover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.displayChange = index.createEvent(this, "display-change", 7);
-    this.closeButtonId = '';
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = index$1.createID('mg-popover');
-    /**
-     * Popover placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Define if popover has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Display popover
-     */
-    this.display = false;
-    /**
-     * Disable popover
-     */
-    this.disabled = false;
-    /**
-     * Check if clicked outside of component
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
-     */
-    this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
-        this.display = false;
-      }
-    };
-    /**
-     * Show popover
-     *
-     * @returns {void}
-     */
-    this.show = () => {
-      // Make the popover visible
-      this.popover.setAttribute('data-show', '');
-      // Enable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // Update its position
-      this.popper.update();
-      // hide when click outside
-      // setTimeout is used to prevent event to trigger after creation
-      setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
-      }, 0);
-    };
-    /**
-     * Hide popover
-     *
-     * @returns {void}
-     */
-    this.hide = () => {
-      // Hide the popover
-      this.popover.removeAttribute('data-show');
-      // Disable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
-    };
-    /**
-     * Handle action for close button
-     *
-     * @returns {void}
-     */
-    this.handleCloseButton = () => {
-      this.display = false;
-    };
-  }
-  handleDisplay(newValue) {
-    if (newValue) {
-      this.show();
-    }
-    else {
-      this.hide();
-    }
-    this.displayChange.emit(newValue);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
-  }
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void}
-   */
-  componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement && !index$1.isTagName(slotedTitleElement, headingTags)) {
-      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
-    // Get popover content
-    this.popover = this.element.querySelector(`#${this.identifier}`);
-    //Get interactive element
-    const interactiveElement = this.element.firstElementChild;
-    // Add aria attributes
-    interactiveElement.setAttribute('aria-controls', this.identifier);
-    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-    // Create popperjs popover
-    this.popper = popper.createPopper(interactiveElement, this.popover, {
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 10],
-          },
-        },
-      ],
-    });
-    // Add events to toggle display
-    interactiveElement.addEventListener('click', () => {
-      if (!this.disabled)
-        this.display = !this.display;
-    });
-    // Add events to hide popover
-    this.element.addEventListener('keydown', e => {
-      if (!this.disabled && e.code === 'Escape')
-        this.display = false;
-    });
-    this.handleDisplay(this.display);
-  }
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" }), index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-};
-MgPopover.style = mgPopoverCss;
-
-exports.mg_popover = MgPopover;