@mgdis/mg-components 5.8.2 → 5.10.0

package/dist/components/components.utils.js

@@ -1,6 +1,5 @@
 /**
  * Create random ID
- *
  * @param {string} prefix  add prefix to created ID
  * @param {number} length ID length
  * @returns {string} ID
@@ -22,7 +21,6 @@ class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     *
      * @param {string} className class name to add
      * @returns {void}
      */
@@ -33,7 +31,6 @@ class ClassList {
     };
     /**
      * Delete class
-     *
      * @param {string} className class name to delete
      * @returns {void}
      */
@@ -45,7 +42,6 @@ class ClassList {
     };
     /**
      * Check if class exist in list
-     *
      * @param {string} className class name to check
      * @returns {boolean} class name is in the list
      */
@@ -54,7 +50,6 @@ class ClassList {
     };
     /**
      * Join classes seperated by spaces
-     *
      * @returns {string} joined values
      */
     this.join = () => {
@@ -65,14 +60,12 @@ class ClassList {
 }
 /**
  * Check if all items are string
- *
  * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
 const allItemsAreString = (items) => Array.isArray(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
@@ -85,7 +78,7 @@ const isTagName = (element, tagNames) => {
  */
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
 /**
- *
+ * Get windows
  * @param {Window} localWindow the window we are lookink for other windows
  * @returns {Window[]} The list of windows found
  */
@@ -96,7 +89,6 @@ const getWindows = (localWindow) => {
 };
 /**
  * Get parent windows
- *
  * @param {Window} localWindow the window we are lookink for parents
  * @param {Window[]} windows The list of allready found windows
  * @returns {Window[]} The list of windows found
@@ -119,7 +111,6 @@ const getParentWindows = (localWindow, windows = []) => {
 };
 /**
  * Get child windows
- *
  * @param {Window} localWindow the window we are lookink for children
  * @param {Window[]} windows The list of allready found windows
  * @returns {Window[]} The list of windows found

package/dist/components/index2.js

@@ -150,7 +150,6 @@ const fr = {
 
 /**
  * Format number to the locale currency
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @param {string} currency currency to apply
@@ -161,7 +160,6 @@ const localeCurrency = (number, locale, currency) => {
 };
 /**
  * Format number to locale
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @returns {string} formatted number
@@ -175,7 +173,6 @@ const localeNumber = (number, locale) => {
 const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 /**
  * Locale date format
- *
  * @param {string} date date to format
  * @param {string} locale locale to apply
  * @returns {string} formatted date
@@ -189,7 +186,6 @@ const localeDate = (date, locale) => {
 /**
  * Get locale and messages
  * 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
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale
@@ -213,7 +209,6 @@ const defaultLocale = 'en';
 const messages = { en, fr };
 /**
  * Get Intl object
- *
  * @param {HTMLElement} element element we need to get the language
  * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */

package/dist/components/mg-action-more.js

@@ -10,11 +10,10 @@ import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-menu2.js';
 import { d as defineCustomElement$2 } from './mg-popover2.js';
 
-const mgActionMoreCss = ".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{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
+const mgActionMoreCss = ".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{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
 
 /**
  * MgActionMore['items'] type guard
- *
  * @param {unknown} prop commponent items prop
  * @returns {boolean} return true if type is valid
  */
@@ -24,7 +23,6 @@ const isMgActionMoreItems = (prop) => {
 };
 /**
  * MgActionMore['button'] type guard
- *
  * @param {unknown} prop commponent button prop
  * @returns {boolean} return true if type is valid
  */
@@ -34,7 +32,6 @@ const isMgActionMoreButton = (prop) => {
 };
 /**
  * MgActionMore['icon'] type guard
- *
  * @param {unknown} prop commponent icon prop
  * @returns {boolean} return true if type is valid
  */
@@ -57,7 +54,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      ***********/
     /**
      * Toogle expanded props
-     *
      * @returns {void}
      */
     this.toggleExpanded = () => {
@@ -65,7 +61,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Button click handler
-     *
      * @returns {void}
      */
     this.handleButton = () => {
@@ -73,7 +68,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Item click handler
-     *
      * @param {MouseEvent} event click event
      * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
      * @returns {void}
@@ -113,7 +107,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -125,7 +118,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-badge2.js

@@ -53,7 +53,6 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -64,7 +63,6 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -78,7 +76,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return mgBadgeCss; }
 }, [1, "mg-badge", {
-    "value": [1032],
+    "value": [8],
     "label": [1],
     "variant": [1],
     "outline": [4],

package/dist/components/mg-button2.js

@@ -24,7 +24,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classFullWidth = 'mg-button--full-width';
     /**
      * Trigger actions onClick event
-     *
      * @param {MouseEvent} event click event
      * @returns {void}
      */
@@ -39,7 +38,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle onKeydown event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -54,7 +52,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle onKeyup event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -127,7 +124,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -145,7 +141,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render() {
@@ -164,8 +159,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "identifier": [1],
     "label": [1],
     "type": [1],
-    "fullWidth": [1028, "full-width"],
-    "form": [1025],
+    "fullWidth": [4, "full-width"],
+    "form": [1],
     "disabled": [1028],
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],

package/dist/components/mg-card2.js

@@ -1,26 +1,89 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList } from './components.utils.js';
 
-const mgCardCss = ".mg-card{position:relative;width:100%;padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
+/**
+ * List available variants
+ */
+const variants = ['info', 'warning', 'success', 'danger', 'app'];
+/**
+ * List available variant styles
+ */
+const variantStyles = ['bar-left', 'fill'];
+
+const mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--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.mg-card--info{overflow:hidden}.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-card.mg-card--info.mg-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-card.mg-card--warning{overflow:hidden}.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-card.mg-card--warning.mg-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-card.mg-card--success{overflow:hidden}.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-card.mg-card--success.mg-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-card.mg-card--danger{overflow:hidden}.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-card.mg-card--danger.mg-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-card.mg-card--app{overflow:hidden}.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-card.mg-card--app.mg-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-card__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /*************
+     * Private *
+     *************/
+    this.name = 'mg-card';
+    this.baseClass = this.name;
+    /**
+     * Methode to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'bar-left';
+    };
+    this.variant = undefined;
+    this.variantStyle = undefined;
+    this.classList = new ClassList([this.baseClass]);
+  }
+  validateVariant(newValue, oldValue) {
+    if (newValue && !variants.includes(newValue))
+      throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
+    if (Boolean(newValue)) {
+      this.setDefaultVariantStyle();
+      this.classList.add(`${this.baseClass}--${newValue}`);
+    }
+    if (Boolean(oldValue))
+      this.classList.delete(`${this.baseClass}--${oldValue}`);
+  }
+  validateVariantStyle(newValue, oldValue) {
+    if (newValue && !variantStyles.includes(newValue))
+      throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
+    else if (Boolean(newValue) && !variants.includes(this.variant))
+      throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
+    if (Boolean(newValue))
+      this.classList.add(`${this.baseClass}--${newValue}`);
+    if (Boolean(oldValue))
+      this.classList.delete(`${this.baseClass}--${oldValue}`);
   }
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateVariantStyle(this.variantStyle);
+  }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: "mg-card" }, h("slot", null)));
+    var _a;
+    return (h("div", { class: this.classList.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
   }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "variantStyle": ["validateVariantStyle"]
+  }; }
   static get style() { return mgCardCss; }
-}, [1, "mg-card"]);
+}, [1, "mg-card", {
+    "variant": [1],
+    "variantStyle": [1025, "variant-style"],
+    "classList": [32]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/mg-character-left2.js

@@ -21,7 +21,6 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -30,7 +29,6 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = ".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}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__toggle mg-icon{align-self:self-end}.mg-details__details{margin-top:1.5rem}";
+const mgDetailsCss = ".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}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__details{margin-top:1.5rem}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,7 +11,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.expandedChange = createEvent(this, "expanded-change", 7);
     /**
      * Handle details toggle
-     *
      * @returns {void}
      */
     this.handleToggle = () => {
@@ -35,7 +34,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -44,11 +42,10 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],

package/dist/components/mg-divider.js

@@ -11,7 +11,6 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-form.js

@@ -16,7 +16,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Define required message based on mg-inputs required elements
      * Also
-     *
      * @returns {void}
      */
     this.setRequiredMessage = () => {
@@ -42,7 +41,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Check if form is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -55,7 +53,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle Form Submit
-     *
      * @param {SubmitEvent} event submit event
      * @returns {void}
      */
@@ -65,7 +62,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Set mgInputs
-     *
      * @returns {void}
      */
     this.setMgInputs = () => {
@@ -97,7 +93,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -113,7 +108,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -141,7 +135,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Add slot listeners
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -160,7 +153,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {