@mgdis/mg-components 4.2.1 → 5.1.0

package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js

@@ -1,20 +0,0 @@
-/**
- * List of all possibles placements
- */
-export const placements = [
-  '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',
-];

package/dist/collection/variables.scss

@@ -1,212 +0,0 @@
-:root {
-  /*
-    Fonts
-  */
-
-  --font-size: 1.3rem;
-  --line-height: 1.4;
-
-  /* Open Sans is used for the body (mostly all texts) */
-  --font-family: 'Open Sans', sans-serif;
-
-  /* Headings (h1 to h6) font can be customized */
-  --font-family-heading: var(--font-family);
-
-  /* Font colors */
-  --color-font-light: var(--color-light);
-  --color-font-dark: var(--color-dark);
-  /*
-    Colors
-    https://jira.mgdis.fr/browse/PDA9-690
-   */
-
-  /* Neutral */
-  /* #fefefe; */
-  /* rgb(254, 254, 254); */
-  --color-neutral-h: 0;
-  --color-neutral-s: 0%;
-  --color-neutral-l: 99.6%;
-  --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
-
-  /* Warning */
-  /* #ffc33e */
-  /* rgb(255, 195, 62); */
-  --color-warning-h: 41;
-  --color-warning-s: 100%;
-  --color-warning-l: 62.2%;
-  --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
-
-  /* Success */
-  /* #32d59c */
-  /* rgb(50, 213, 156); */
-  --color-success-h: 159;
-  --color-success-s: 66%;
-  --color-success-l: 51.6%;
-  --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
-
-  /* Info */
-  /* #005e9c; */
-  /* rgb(0, 94, 156); */
-  --color-info-h: 204;
-  --color-info-s: 100%;
-  --color-info-l: 30.6%;
-  --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
-
-  /* Danger */
-  /* #db1f29; */
-  /* rgb(219, 31, 41); */
-  --color-danger-h: 357;
-  --color-danger-s: 75%;
-  --color-danger-l: 49%;
-  --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
-
-  /* Dark */
-  /* #15282e; */
-  /* rgb(21, 40, 46); */
-  --color-dark-h: 194;
-  --color-dark-s: 37.3%;
-  --color-dark-l: 13.1%;
-  --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
-
-  /* Light */
-  /* white; (#ffffff) */
-  /* rgb(255, 255, 255); */
-  --color-light-h: 0;
-  --color-light-s: 0%;
-  --color-light-l: 100%;
-  --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
-
-  /* Primary */
-  --color-primary-h: hsl(var(--color-dark-h));
-  --color-primary-s: hsl(var(--color-dark-s));
-  --color-primary-l: hsl(var(--color-dark-l));
-  --color-primary: hsl(var(--color-dark));
-
-  /* Secondary */
-  --color-secondary-h: hsl(var(--color-neutral-h));
-  --color-secondary-s: hsl(var(--color-neutral-s));
-  --color-secondary-l: hsl(var(--color-neutral-l));
-  --color-secondary: hsl(var(--color-neutral));
-
-  /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
-
-  /*
-    Global
-   */
-  --default-size: 3.5rem;
-
-  /*
-    <mg-icon>
-   */
-  --mg-icon-small-size: 1.2rem;
-  --mg-icon-regular-size: 1.6rem;
-  --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.6rem;
-
-  /*
-    <mg-button>
-   */
-
-  --mg-button-border-radius: 0.3rem;
-  --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: 0.6;
-  --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
-  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
-
-  /* Primary */
-  --mg-button-primary-color-h: var(--color-dark-h);
-  --mg-button-primary-color-s: var(--color-dark-s);
-  --mg-button-primary-color-l: var(--color-dark-l);
-  --mg-button-primary-font-color: var(--color-neutral);
-
-  /* Secondary */
-  --mg-button-secondary-color-h: var(--color-neutral-h);
-  --mg-button-secondary-color-s: var(--color-neutral-s);
-  --mg-button-secondary-color-l: var(--color-neutral-l);
-  --mg-button-secondary-font-color: var(--color-dark);
-
-  /*
-    <mg-tag>
-   */
-  --mg-tag-height: 2.3rem;
-  --mg-tag-border-radius: 0.5rem;
-  --mg-tag-font-size: 1.2rem;
-
-  /*
-  <mg-badge>
-  */
-  --mg-badge-size: 1.6rem;
-  --mg-badge-font-size: 1.1rem;
-
-  /*
-    <mg-tooltip>
-   */
-  --mg-tooltip-border-radius: 0.5rem;
-  --mg-tooltip-background-color: var(--color-dark);
-  --mg-tooltip-font-color: var(--color-font-light);
-
-  /*
-    <mg-popover>
-   */
-  --mg-popover-background-color: var(--color-light);
-  --mg-popover-font-color: var(--color-font-dark);
-  --mg-popover-title-font-size: 1.4rem;
-
-  /*
-    <mg-message>
-   */
-  --mg-message-border-radius: 0.3rem;
-
-  /*
-    <mg-modal>
-   */
-  --mg-modal-border-radius: 0.5rem;
-  --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.2rem;
-
-  /*
-    <mg-panel>
-   */
-
-  --mg-panel-border-radius: 0.5rem;
-  --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
-  --mg-panel-content-padding: 1.5rem;
-
-  /*
-    Layout
-   */
-  --mg-grid-spacing: 1rem;
-
-  /*
-    Forms
-   */
-
-  /*
-    <mg-input-...>
-   */
-  --mg-inputs-border-width: 0.1rem;
-  --mg-inputs-border-radius: 0.3rem;
-  --mg-inputs-color: #b5c2c9;
-  --mg-inputs-spacer: 1rem;
-
-  /* Error message background */
-  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
-
-  /* Input focus shadow */
-  /* #b5c2c9 */
-  /* rgb(0, 221, 255); */
-  /* hsl(188, 100%, 50%); */
-  --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
-
-  /*
-    <mg-input-toggle>
-  */
-  --mg-input-toggle-border-radius-ratio: 2;
-
-  /*
-    <mg-input-checkbox>
-    <mg-input-radio>
-   */
-  --mg-input-check-size: 1.3rem;
-}

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,126 +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() === '') {
-      // 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 = 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 };