@mgdis/mg-components 3.1.0

package/dist/collection/variables.css

@@ -0,0 +1,177 @@
+: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;
+
+  /* Poppins is used for the headings (h1 to h6) */
+  --font-family-heading: 'Poppins', sans-serif;
+
+  /* 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 */
+  /* #df242c; */
+  /* rgb(223, 36, 44); */
+  --color-danger-h: 357;
+  --color-danger-s: 74.5%;
+  --color-danger-l: 50.8%;
+  --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);
+
+  /*
+    Global
+   */
+  --default-size: 3.5rem;
+
+  /*
+    <mg-icon>
+   */
+  --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;
+
+  /* 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;
+
+  /*
+    Layout
+   */
+  --mg-grid-spacing: 1rem;
+
+  /*
+    Forms
+   */
+  --mg-form-group-vertical-space: 1.5rem;
+
+  /*
+    <mg-input-...>
+   */
+  --mg-inputs-border-width: 0.1rem;
+  --mg-inputs-border-radius: 0.3rem;
+  --mg-inputs-color: #b5c2c9;
+  --mg-inputs-spacer: 1rem;
+
+  /* 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/collection/variables.scss

@@ -0,0 +1,177 @@
+: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;
+
+  /* Poppins is used for the headings (h1 to h6) */
+  --font-family-heading: 'Poppins', sans-serif;
+
+  /* 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 */
+  /* #df242c; */
+  /* rgb(223, 36, 44); */
+  --color-danger-h: 357;
+  --color-danger-s: 74.5%;
+  --color-danger-l: 50.8%;
+  --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);
+
+  /*
+    Global
+   */
+  --default-size: 3.5rem;
+
+  /*
+    <mg-icon>
+   */
+  --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;
+
+  /* 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;
+
+  /*
+    Layout
+   */
+  --mg-grid-spacing: 1rem;
+
+  /*
+    Forms
+   */
+  --mg-form-group-vertical-space: 1.5rem;
+
+  /*
+    <mg-input-...>
+   */
+  --mg-inputs-border-width: 0.1rem;
+  --mg-inputs-border-radius: 0.3rem;
+  --mg-inputs-color: #b5c2c9;
+  --mg-inputs-spacer: 1rem;
+
+  /* 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/components/MgInput.js

@@ -0,0 +1,140 @@
+import { h } from '@stencil/core/internal/client';
+
+/**
+ * Possible input classes
+ */
+var InputClass;
+(function (InputClass) {
+  InputClass["ERROR"] = "is-not-valid";
+})(InputClass || (InputClass = {}));
+
+/**
+ * Apply in all input child node the aria-describedby attribute
+ * @param children
+ * @param ariaDescribedbyIDs
+ * @param utils
+ * @returns {VNode[]}
+ */
+const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
+  if (['input', 'select', 'textarea'].includes(child.vtag)) {
+    return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
+  }
+  // we recursively apply ariadescribedBy attributes to child input nodes if exists
+  if (child.vchildren === null)
+    return Object.assign({}, child);
+  return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
+});
+/**
+ * Add classes based on props
+ * @param props
+ */
+const manageClasses = (props) => {
+  props.classList.add('mg-input');
+  if (props.labelOnTop)
+    props.classList.add('mg-input--label-on-top');
+  if (props.readonly)
+    props.classList.add('mg-input--readonly');
+  if (props.width !== undefined)
+    props.classList.add(`mg-input--width-${props.width}`);
+  if (props.readonly || props.disabled) {
+    props.classList.delete(InputClass.ERROR);
+  }
+};
+/**
+ * Define tagname based on props
+ * @param isFieldset
+ * @returns {string} tag name
+ */
+const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
+/**
+ * Get input template
+ * @param props MgInput Interface Props
+ * @param children Represent scoped elements
+ * @param utils Stencil.js utils
+ * @returns JSX template
+ */
+const MgInput = (props, children, utils) => {
+  /**
+   * Check required properties
+   */
+  if (typeof props.label !== 'string' || props.label === '') {
+    throw new Error('<mg-input> prop "label" is required');
+  }
+  if (props.labelOnTop && props.labelHide) {
+    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
+  }
+  /**
+   * Component classes
+   */
+  manageClasses(props);
+  /**
+   * a11y IDs
+   */
+  const ariaDescribedbyIDs = new Set();
+  // Character Left
+  const characterLeftId = `${props.identifier}-character-left`;
+  if (props.classList.has('is-focused') && props.displayCharacterLeft) {
+    ariaDescribedbyIDs.add(characterLeftId);
+  }
+  // Help text
+  const helpTextId = `${props.identifier}-help-text`;
+  if (typeof props.helpText === 'string' && props.helpText !== '') {
+    ariaDescribedbyIDs.add(helpTextId);
+  }
+  // Error Message
+  const helpTextErrorId = `${props.identifier}-error`;
+  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
+    ariaDescribedbyIDs.add(helpTextErrorId);
+  }
+  /**
+   * Update input(s) in children
+   */
+  if (props.readonly) {
+    children = children.filter(child => child.$name$ === 'append-input');
+  }
+  else {
+    children = applyAriadescribedBy(children, ariaDescribedbyIDs, utils);
+  }
+  /**
+   * Return template
+   *
+   * +--------+--------------+---------+
+   * |  label | input        | tooltip |
+   * |        +--------------+---------+
+   * |        | nb Char Left           |
+   * |        +------------------------+
+   * |        | Help Text              |
+   * |        +------------------------+
+   * |        | Error                  |
+   * +--------+------------------------+
+   *
+   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
+   */
+  const TagName = getTagName(props.isFieldset);
+  /**
+   * Get tooltip node
+   * @returns mg-tooltip
+   */
+  const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
+    h("mg-icon", { icon: "info-circle" })));
+  /**
+   * Get input title (label) node
+   * @returns mg-input-title
+   */
+  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required, "is-legend": props.isFieldset }, props.label));
+  return (h(TagName, { class: props.classList.join() },
+    props.labelOnTop ? (h("div", { class: "mg-input__title" },
+      getInputTitle(),
+      !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
+    props.readonly ? (h("div", { class: "mg-input__input-container" },
+      h("strong", null, props.readonlyValue || props.value),
+      children)) : (h("div", { class: "mg-input__input-container" },
+      h("div", { class: "mg-input__input" },
+        children,
+        !props.labelOnTop && props.tooltip && getTooltip()),
+      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
+      props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
+      props.errorMessage && h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
+};
+
+export { InputClass as I, MgInput as M };

package/dist/components/components.utils.js

@@ -0,0 +1,69 @@
+/**
+ * Create random ID
+ * @param prefix {string} add prefix to created ID
+ * @returns {string} ID
+ */
+function createID(prefix = '', length = 10) {
+  let ID = '';
+  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  const charsLength = chars.length;
+  for (var 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 className
+     * @returns {void}
+     */
+    this.add = (className) => {
+      if (!this.has(className)) {
+        this.classes.push(className);
+      }
+    };
+    /**
+     * Delete class
+     * @param className
+     * @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 className
+     * @returns {boolean}
+     */
+    this.has = (className) => {
+      return this.classes.includes(className);
+    };
+    /**
+     * Join classes seperated by spaces
+     * @returns {string}
+     */
+    this.join = () => {
+      return this.classes.join(' ');
+    };
+    this.classes = classlist;
+  }
+}
+/**
+ * Check if all items are string
+ * @param items
+ * @returns {boolean}
+ */
+function allItemsAreString(items) {
+  return items && items.every(item => typeof item === 'string');
+}
+
+export { ClassList as C, allItemsAreString as a, createID as c };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* MgComponents custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/index2.js

@@ -0,0 +1,54 @@
+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 {min} et {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: "Veuillez sélectionner une valeur"
+	},
+	checkbox: {
+		"true": "Oui",
+		"false": "Non",
+		indeterminate: "Indéterminé"
+	}
+};
+const message = {
+	closeButton: "Fermer le message"
+};
+const popover = {
+	closeButton: "Fermer"
+};
+const pagination = {
+	page: "page",
+	pages: "pages",
+	next: "suivant",
+	previous: "précédent",
+	nextPage: "Page suivante",
+	previousPage: "Page précédente",
+	selectPage: "Sélectionner la page à afficher."
+};
+const fr = {
+	errors: errors,
+	nbCharLeft: nbCharLeft,
+	input: input,
+	message: message,
+	popover: popover,
+	pagination: pagination
+};
+
+const locale = 'fr-FR';
+const messages = fr;
+const currency = 'EUR';
+
+export { currency as c, locale as l, messages as m };

package/dist/components/locale.utils.js

@@ -0,0 +1,35 @@
+import { l as locale, c as currency } from './index2.js';
+
+/**
+ * Format number to the locale currency
+ * @param number {number}
+ * @returns {string} formatted currency
+ */
+function localeCurrency(number) {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
+}
+/**
+ * Format number to locale
+ * @param number {number}
+ * @returns {string} formatted number
+ */
+function localeNumber(number) {
+  return new Intl.NumberFormat(locale).format(number);
+}
+/**
+ * Date RegExp
+ */
+const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+/**
+ * Locale date format
+ * @param date {string}
+ * @returns {string} formatted date
+ */
+function localeDate(date) {
+  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale).format(new Date(date));
+}
+
+export { localeCurrency as a, localeNumber as b, dateRegExp as d, localeDate as l };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgBadge extends Components.MgBadge, HTMLElement {}
+export const MgBadge: {
+  prototype: MgBadge;
+  new (): MgBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-badge.js

@@ -0,0 +1,6 @@
+import { M as MgBadge$1, d as defineCustomElement$1 } from './mg-badge2.js';
+
+const MgBadge = MgBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgBadge, defineCustomElement };