@mgdis/mg-components 5.15.0 → 5.17.0

package/dist/components/components.utils.js

@@ -5,11 +5,15 @@
  * @returns ID
  */
 const 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));
+  let ID = '';
+  let now = Date.now();
+  while (length > 0) {
+    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
+    const index = now % charsLength;
+    ID += chars.charAt(index);
+    length--;
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
 };
@@ -115,10 +119,7 @@ const getParentWindows = (localWindow, windows = []) => {
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {
-    // Window.frames is an array-like object, needs a classic for loop
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
-    for (let i = 0; i < localWindow.frames.length; i++) {
-      const childWindow = localWindow.frames[i];
+    for (const childWindow of Array.from(localWindow.frames)) {
       windows.push(childWindow);
       getChildWindows(childWindow, windows);
     }
@@ -127,3 +128,5 @@ const getChildWindows = (localWindow, windows = []) => {
 };
 
 export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, getWindows as g, isTagName as i };
+
+//# sourceMappingURL=components.utils.js.map

package/dist/components/components.utils.js.map

@@ -0,0 +1 @@
+{"file":"components.utils.js","mappings":"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","names":[],"sources":["src/utils/components.utils.ts"],"sourcesContent":["/**\n * Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n */\nexport const createID = (prefix = '', length = 10): string => {\n  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n  const charsLength = chars.length;\n\n  let ID = '';\n  let now = Date.now();\n  while (length > 0) {\n    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n    const index = now % charsLength;\n    ID += chars.charAt(index);\n    length--;\n  }\n  return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/**\n * Class to manage component classlist\n * Set() are not working when imported in project\n */\nexport class ClassList {\n  /**\n   * Available classes\n   */\n  classes: string[];\n\n  constructor(classlist: string[] = []) {\n    this.classes = classlist;\n  }\n\n  /**\n   * Add class\n   * @param className - class name to add\n   */\n  add = (className: string): void => {\n    if (!this.has(className)) {\n      this.classes.push(className);\n    }\n  };\n\n  /**\n   * Delete class\n   * @param className - class name to delete\n   */\n  delete = (className: string): void => {\n    const index = this.classes.indexOf(className);\n    if (index > -1) {\n      this.classes.splice(index, 1);\n    }\n  };\n\n  /**\n   * Check if class exist in list\n   * @param className - class name to check\n   * @returns class name is in the list\n   */\n  has = (className: string): boolean => {\n    return this.classes.includes(className);\n  };\n\n  /**\n   * Join classes seperated by spaces\n   * @returns joined values\n   */\n  join = (): string => {\n    return this.classes.join(' ');\n  };\n}\n\n/**\n * Check if all items are string\n * @param items - items to check\n * @returns all items are string\n */\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/**\n * Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n */\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n  return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/**\n * Focusable elements query selector\n */\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/**\n * Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n */\nexport const getWindows = (localWindow: Window): Window[] => {\n  const parentWindows = getParentWindows(localWindow);\n  const childWindows = getChildWindows(localWindow);\n  return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/**\n * Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n  // Check if is in iframe\n  if (localWindow.self !== localWindow.top) {\n    // Check if we have permission to access parent\n    try {\n      const parentWindow: Window = localWindow.parent;\n      windows.push(parentWindow);\n      return getParentWindows(parentWindow, windows);\n    } catch (err) {\n      console.error('Different hosts between iframes:', err);\n      return windows;\n    }\n  }\n  return windows;\n};\n\n/**\n * Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n  if (localWindow.frames.length > 0) {\n    for (const childWindow of Array.from(localWindow.frames)) {\n      windows.push(childWindow);\n      getChildWindows(childWindow, windows);\n    }\n  }\n  return windows;\n};\n"],"version":3}

package/dist/components/index.d.ts

@@ -1,37 +1,8 @@
-/* MgComponents custom elements */
-export { MgActionMore as MgActionMore } from '../types/components/molecules/mg-action-more/mg-action-more';
-export { MgBadge as MgBadge } from '../types/components/atoms/mg-badge/mg-badge';
-export { MgButton as MgButton } from '../types/components/atoms/mg-button/mg-button';
-export { MgCard as MgCard } from '../types/components/atoms/mg-card/mg-card';
-export { MgCharacterLeft as MgCharacterLeft } from '../types/components/atoms/mg-character-left/mg-character-left';
-export { MgDetails as MgDetails } from '../types/components/molecules/mg-details/mg-details';
-export { MgDivider as MgDivider } from '../types/components/atoms/mg-divider/mg-divider';
-export { MgForm as MgForm } from '../types/components/molecules/mg-form/mg-form';
-export { MgIcon as MgIcon } from '../types/components/atoms/mg-icon/mg-icon';
-export { MgIllustratedMessage as MgIllustratedMessage } from '../types/components/molecules/mg-illustrated-message/mg-illustrated-message';
-export { MgInputCheckbox as MgInputCheckbox } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox';
-export { MgInputCheckboxPaginated as MgInputCheckboxPaginated } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated';
-export { MgInputDate as MgInputDate } from '../types/components/molecules/inputs/mg-input-date/mg-input-date';
-export { MgInputNumeric as MgInputNumeric } from '../types/components/molecules/inputs/mg-input-numeric/mg-input-numeric';
-export { MgInputPassword as MgInputPassword } from '../types/components/molecules/inputs/mg-input-password/mg-input-password';
-export { MgInputRadio as MgInputRadio } from '../types/components/molecules/inputs/mg-input-radio/mg-input-radio';
-export { MgInputSelect as MgInputSelect } from '../types/components/molecules/inputs/mg-input-select/mg-input-select';
-export { MgInputText as MgInputText } from '../types/components/molecules/inputs/mg-input-text/mg-input-text';
-export { MgInputTextarea as MgInputTextarea } from '../types/components/molecules/inputs/mg-input-textarea/mg-input-textarea';
-export { MgInputTitle as MgInputTitle } from '../types/components/atoms/mg-input-title/mg-input-title';
-export { MgInputToggle as MgInputToggle } from '../types/components/molecules/inputs/mg-input-toggle/mg-input-toggle';
-export { MgItemMore as MgItemMore } from '../types/components/molecules/mg-item-more/mg-item-more';
-export { MgMenu as MgMenu } from '../types/components/molecules/menu/mg-menu/mg-menu';
-export { MgMenuItem as MgMenuItem } from '../types/components/molecules/menu/mg-menu-item/mg-menu-item';
-export { MgMessage as MgMessage } from '../types/components/molecules/mg-message/mg-message';
-export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-modal';
-export { MgPagination as MgPagination } from '../types/components/molecules/mg-pagination/mg-pagination';
-export { MgPanel as MgPanel } from '../types/components/molecules/mg-panel/mg-panel';
-export { MgPopover as MgPopover } from '../types/components/molecules/mg-popover/mg-popover';
-export { MgSkipLinks as MgSkipLinks } from '../types/components/molecules/mg-skip-links/mg-skip-links';
-export { MgTabs as MgTabs } from '../types/components/molecules/mg-tabs/mg-tabs';
-export { MgTag as MgTag } from '../types/components/atoms/mg-tag/mg-tag';
-export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-tooltip';
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -60,4 +31,3 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-export * from '../types';

package/dist/components/index.js

@@ -1,34 +1,3 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { MgActionMore, defineCustomElement as defineCustomElementMgActionMore } from './mg-action-more.js';
-export { MgBadge, defineCustomElement as defineCustomElementMgBadge } from './mg-badge.js';
-export { MgButton, defineCustomElement as defineCustomElementMgButton } from './mg-button.js';
-export { MgCard, defineCustomElement as defineCustomElementMgCard } from './mg-card.js';
-export { MgCharacterLeft, defineCustomElement as defineCustomElementMgCharacterLeft } from './mg-character-left.js';
-export { MgDetails, defineCustomElement as defineCustomElementMgDetails } from './mg-details.js';
-export { MgDivider, defineCustomElement as defineCustomElementMgDivider } from './mg-divider.js';
-export { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-form.js';
-export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.js';
-export { MgIllustratedMessage, defineCustomElement as defineCustomElementMgIllustratedMessage } from './mg-illustrated-message.js';
-export { MgInputCheckbox, defineCustomElement as defineCustomElementMgInputCheckbox } from './mg-input-checkbox.js';
-export { MgInputCheckboxPaginated, defineCustomElement as defineCustomElementMgInputCheckboxPaginated } from './mg-input-checkbox-paginated.js';
-export { MgInputDate, defineCustomElement as defineCustomElementMgInputDate } from './mg-input-date.js';
-export { MgInputNumeric, defineCustomElement as defineCustomElementMgInputNumeric } from './mg-input-numeric.js';
-export { MgInputPassword, defineCustomElement as defineCustomElementMgInputPassword } from './mg-input-password.js';
-export { MgInputRadio, defineCustomElement as defineCustomElementMgInputRadio } from './mg-input-radio.js';
-export { MgInputSelect, defineCustomElement as defineCustomElementMgInputSelect } from './mg-input-select.js';
-export { MgInputText, defineCustomElement as defineCustomElementMgInputText } from './mg-input-text.js';
-export { MgInputTextarea, defineCustomElement as defineCustomElementMgInputTextarea } from './mg-input-textarea.js';
-export { MgInputTitle, defineCustomElement as defineCustomElementMgInputTitle } from './mg-input-title.js';
-export { MgInputToggle, defineCustomElement as defineCustomElementMgInputToggle } from './mg-input-toggle.js';
-export { MgItemMore, defineCustomElement as defineCustomElementMgItemMore } from './mg-item-more.js';
-export { MgMenu, defineCustomElement as defineCustomElementMgMenu } from './mg-menu.js';
-export { MgMenuItem, defineCustomElement as defineCustomElementMgMenuItem } from './mg-menu-item.js';
-export { MgMessage, defineCustomElement as defineCustomElementMgMessage } from './mg-message.js';
-export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg-modal.js';
-export { MgPagination, defineCustomElement as defineCustomElementMgPagination } from './mg-pagination.js';
-export { MgPanel, defineCustomElement as defineCustomElementMgPanel } from './mg-panel.js';
-export { MgPopover, defineCustomElement as defineCustomElementMgPopover } from './mg-popover.js';
-export { MgSkipLinks, defineCustomElement as defineCustomElementMgSkipLinks } from './mg-skip-links.js';
-export { MgTabs, defineCustomElement as defineCustomElementMgTabs } from './mg-tabs.js';
-export { MgTag, defineCustomElement as defineCustomElementMgTag } from './mg-tag.js';
-export { MgTooltip, defineCustomElement as defineCustomElementMgTooltip } from './mg-tooltip.js';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/index2.js

@@ -263,3 +263,5 @@ const messages = { en, fr };
 const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
 
 export { localeCurrency as a, localeNumber as b, dateRegExp as d, initLocales as i, localeDate as l };
+
+//# sourceMappingURL=index2.js.map

package/dist/components/index2.js.map

@@ -0,0 +1 @@
+{"file":"index2.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;MAOa,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB;EAC7E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,EAAE;AAEF;;;;;;MAMa,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc;EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,EAAE;AAEF;;;MAGa,UAAU,GAAG,gDAAgD;AAE1E;;;;;;MAMa,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc;EACrD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,EAAE;AAEF;;;;;;;;AAQO,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB;;EAE9F,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;;EAE7F,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;;EAE/C,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC;;ACvDD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAG,CAAC,OAAoB,KAA4D,iBAAiB,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa;;;;","names":[],"sources":["src/utils/locale.utils.ts","src/locales/index.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n"],"version":3}

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

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { S as Status, d as defineCustomElement$3 } from './mg-menu-item2.js';
+import { S as Status, d as defineCustomElement$4 } from './mg-menu-item2.js';
 import { D as Direction } from './mg-menu.conf.js';
 import { c as createID } from './components.utils.js';
-import { d as defineCustomElement$8 } from './mg-badge2.js';
-import { d as defineCustomElement$7 } from './mg-button2.js';
-import { d as defineCustomElement$6 } from './mg-card2.js';
-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';
+import { d as defineCustomElement$9 } from './mg-badge2.js';
+import { d as defineCustomElement$8 } from './mg-button2.js';
+import { d as defineCustomElement$7 } from './mg-card2.js';
+import { d as defineCustomElement$6 } from './mg-icon2.js';
+import { d as defineCustomElement$5 } from './mg-menu2.js';
+import { d as defineCustomElement$3 } from './mg-popover2.js';
+import { d as defineCustomElement$2 } from './mg-popover-content2.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-popover-max-width:unset}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
 
@@ -39,7 +40,7 @@ const isMgActionMoreIcon = (prop) => {
   const icon = prop;
   return typeof icon === 'object' && typeof icon.icon === 'string';
 };
-const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -50,7 +51,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.name = 'mg-action-more';
     this.mgPopoverIdentifier = createID(this.name);
     /************
-     * Merthods *
+     * Methods *
      ***********/
     /**
      * Toogle expanded props
@@ -58,6 +59,13 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
+    /**
+     * Handle popover display change value
+     * @param event - display change updated value
+     */
+    this.handleDisplayChange = (event) => {
+      this.expanded = event.detail;
+    };
     /**
      * Button click handler
      */
@@ -73,7 +81,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.expanded = false;
       customHandler(event);
     };
-    this.icon = { icon: 'ellipsis' };
+    this.icon = undefined;
     this.button = { variant: 'flat', isIcon: true };
     this.items = undefined;
     this.displayChevron = undefined;
@@ -83,6 +91,9 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (newValue && !isMgActionMoreIcon(newValue)) {
       throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
     }
+    else if (!Boolean(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
+      this.icon = { icon: 'ellipsis' };
+    }
   }
   validateButton(newValue) {
     if (newValue && !isMgActionMoreButton(newValue)) {
@@ -126,7 +137,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
           'mg-a11y-animation': true,
         } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -142,17 +153,22 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }; }
   static get style() { return mgActionMoreCss; }
 }, [1, "mg-action-more", {
-    "icon": [16],
+    "icon": [1040],
     "button": [16],
     "items": [16],
     "displayChevron": [4, "display-chevron"],
     "expanded": [32]
+  }, undefined, {
+    "icon": ["validateIcon"],
+    "button": ["validateButton"],
+    "items": ["validateItems"],
+    "displayChevron": ["validateDisplayChevron"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-action-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover"];
+  const components = ["mg-action-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover", "mg-popover-content"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-action-more":
       if (!customElements.get(tagName)) {
@@ -161,35 +177,40 @@ function defineCustomElement$1() {
       break;
     case "mg-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "mg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "mg-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "mg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "mg-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "mg-menu-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "mg-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-popover-content":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -202,3 +223,5 @@ const MgActionMore = MgActionMore$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgActionMore, defineCustomElement };
+
+//# sourceMappingURL=mg-action-more.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-action-more.js","mappings":"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","names":["MgActionMore"],"sources":["src/components/molecules/mg-action-more/mg-action-more.scss?tag=mg-action-more&encapsulation=shadow","src/components/molecules/mg-action-more/mg-action-more.tsx"],"sourcesContent":["@import '../../../styles/a11y.scss';\n@import '../../../styles/mixins/mg-icon-animation.scss';\n\n:host {\n  --mg-popover-padding-vertical: 1rem;\n  --mg-popover-padding-horizontal: 0;\n  --mg-popover-max-width: unset;\n}\n\n.mg-action-more__chevron {\n  @include rotate('.mg-action-more__chevron', 200ms);\n}\n","import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreMessageType } from './mg-action-more.conf';\nimport { initLocales } from '../../../locales';\nimport { Status } from '../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { createID } from '../../../utils/components.utils';\n\n/**\n * MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n  const items = prop as MgActionMoreItemType[];\n  return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');\n};\n\n/**\n * MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n  const button = prop as MgActionMoreButtonType;\n  return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/**\n * MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n  const icon = prop as MgActionMoreIconType;\n  return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n  tag: 'mg-action-more',\n  styleUrl: 'mg-action-more.scss',\n  shadow: true,\n})\nexport class MgActionMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-action-more';\n  private readonly mgPopoverIdentifier = createID(this.name);\n  private messages: MgActionMoreMessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgActionMoreElement;\n\n  /**\n   * Define displaied icon\n   */\n  @Prop({ mutable: true }) icon: MgActionMoreIconType;\n  @Watch('icon')\n  validateIcon(newValue: MgActionMore['icon']): void {\n    if (newValue && !isMgActionMoreIcon(newValue)) {\n      throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);\n    } else if (!Boolean(newValue?.icon) && Boolean(this.button.isIcon)) {\n      this.icon = { icon: 'ellipsis' };\n    }\n  }\n\n  /**\n   * Define button properties\n   */\n  @Prop() button: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n  @Watch('button')\n  validateButton(newValue: MgActionMore['button']): void {\n    if (newValue && !isMgActionMoreButton(newValue)) {\n      throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);\n    }\n  }\n\n  /**\n   * Define the menu-items elements\n   */\n  @Prop() items!: MgActionMoreItemType[];\n  @Watch('items')\n  validateItems(newValue: MgActionMore['items']): void {\n    if (!isMgActionMoreItems(newValue)) {\n      throw new Error(`<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`);\n    }\n  }\n\n  /**\n   * Define if chevron is display\n   */\n  @Prop() displayChevron: boolean;\n  @Watch('displayChevron')\n  validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n    if (newValue && this.button.isIcon === true) {\n      throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n    }\n  }\n  /**\n   * Menu expanded state\n   */\n  @State() expanded = false;\n\n  /************\n   * Methods *\n   ***********/\n\n  /**\n   * Toogle expanded props\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Handle popover display change value\n   * @param event - display change updated value\n   */\n  private handleDisplayChange = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /**\n   * Button click handler\n   */\n  private handleButton = (): void => {\n    this.toggleExpanded();\n  };\n\n  /**\n   * Item click handler\n   * @param event - click event\n   * @param customHandler - item['mouseEventHandler']\n   */\n  private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n    this.expanded = false;\n    customHandler(event);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.messages = initLocales(this.element).messages.actionMore as MgActionMoreMessageType;\n    this.validateItems(this.items);\n    this.validateButton(this.button);\n    this.validateIcon(this.icon);\n    this.validateDisplayChevron(this.displayChevron);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const buttonLabel = this.button.label || this.messages.label;\n    const buttonContent = [buttonLabel];\n\n    if (!this.button.isIcon && this.displayChevron) {\n      buttonContent.push(\n        <span\n          class={{\n            [`${this.name}__chevron`]: true,\n            [`${this.name}__chevron--rotate`]: this.expanded === true,\n            'mg-a11y-animation': true,\n          }}\n        >\n          <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n        </span>,\n      );\n    }\n\n    return (\n      <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n        <span class=\"mg-action-more\">\n          <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n            <mg-button variant={this.button.variant} isIcon={this.button.isIcon} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n              {this.icon && <mg-icon {...this.icon}></mg-icon>}\n              {!this.button.isIcon && buttonContent}\n            </mg-button>\n            <div slot=\"content\">\n              <mg-menu direction={Direction.VERTICAL} label={this.messages.label}>\n                {this.items.map(item => (\n                  // eslint-disable-next-line react/jsx-no-bind\n                  <mg-menu-item key={item.label} status={item.status || Status.VISIBLE} onClick={e => this.handleItemClick(e, item.mouseEventHandler)} href={item.href}>\n                    {item.icon && <mg-icon icon={item.icon} slot=\"image\"></mg-icon>}\n                    <span slot=\"label\">{item.label}</span>\n                    {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n                  </mg-menu-item>\n                ))}\n              </mg-menu>\n            </div>\n          </mg-popover>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-badge.js

@@ -4,3 +4,5 @@ const MgBadge = MgBadge$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgBadge, defineCustomElement };
+
+//# sourceMappingURL=mg-badge.js.map

package/dist/components/mg-badge.js.map

@@ -0,0 +1 @@
+{"file":"mg-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-badge2.js

@@ -8,7 +8,7 @@ const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'
 
 const mgBadgeCss = ".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-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge.mg-badge--text-color{background-color:currentColor;border-color:currentColor}.mg-badge.mg-badge--text-color .mg-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-badge.mg-badge--text-color.mg-badge--outline{background-color:transparent}.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value{color:currentColor}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
-const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -80,6 +80,11 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "outline": [4],
     "classCollection": [32]
+  }, undefined, {
+    "value": ["validateValue"],
+    "label": ["validateLabel"],
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -97,3 +102,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgBadge as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-badge2.js.map

package/dist/components/mg-badge2.js.map

@@ -0,0 +1 @@
+{"file":"mg-badge2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACH/G,MAAM,UAAU,GAAG,gkFAAgkF;;MCQtkF,OAAO;;;;;;;;;IAMD,iBAAY,GAAG,mBAAmB,CAAC;;;mBAgCf,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;;EA/CjE,aAAa,CAAC,QAA0B;IACtC,IAAI,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,KAAK,IAAI,EAAE;MACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;GACF;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;GACF;EAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;IACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;OACtD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;KACnD;GACF;EAOD,eAAe,CAAC,QAA4B;IAC1C,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrD;;;;EAUD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACpC;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACjD,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","src/components/atoms/mg-badge/mg-badge.scss?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/**\n * Variant type from variants\n */\nexport type BadgeVariantType = (typeof variants)[number];\n","@import '../../../styles/a11y.scss';\n\n/* Variables */\n$mg-badge-border-width: 0.1rem;\n\n/* Mixins */\n@mixin badge-variant($name, $backgroundColor, $color) {\n  &.mg-badge--#{$name} {\n    @if $name == 'text-color' {\n      // Decoration\n      background-color: currentColor;\n      border-color: currentColor;\n      .mg-badge__value {\n        // Font\n        color: hsl(var(--mg-badge-text-color, var(--color-light)));\n      }\n    } @else {\n      // Decoration\n      background-color: hsl(var(--color-#{$backgroundColor}));\n      border-color: hsl(var(--color-#{$backgroundColor}));\n      // Font\n      color: hsl(var(--color-#{$color}));\n    }\n\n    &.mg-badge--outline {\n      // Decoration\n      background-color: transparent;\n      // Font\n      @if $name == 'text-color' {\n        // Font\n        .mg-badge__value {\n          color: currentColor;\n        }\n      } @else {\n        color: hsl(var(--color-#{$backgroundColor}));\n      }\n    }\n  }\n}\n\n/* Styles */\n.mg-badge {\n  // Display\n  padding: 0 0.4rem;\n  height: var(--mg-badge-size);\n  min-width: var(--mg-badge-size);\n  box-sizing: border-box;\n  // Decoration\n  border: $mg-badge-border-width solid;\n  border-radius: calc(var(--mg-badge-size) / 2);\n  // Font\n  font-size: var(--mg-badge-font-size);\n  font-weight: 600;\n  text-align: center;\n  line-height: var(--mg-badge-size);\n\n  // Variant\n  @include badge-variant('primary', 'dark', 'light');\n  @include badge-variant('secondary', 'light', 'dark');\n  @include badge-variant('success', 'success', 'dark');\n  @include badge-variant('warning', 'warning', 'dark');\n  @include badge-variant('danger', 'danger', 'light');\n  @include badge-variant('info', 'info', 'light');\n  @include badge-variant('text-color', none, 'light');\n}\n\n.mg-badge,\nmg-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-badge',\n  styleUrl: 'mg-badge.scss',\n  shadow: true,\n})\nexport class MgBadge {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = `mg-badge--outline`;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Badge value\n   */\n  @Prop() value!: string | number;\n  @Watch('value')\n  validateValue(newValue: MgBadge['value']): void {\n    if (`${newValue}`.match(/^(\\d+\\+*|[?*!a-z])$/i) === null) {\n      throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\n    }\n  }\n\n  /**\n   * Badge label. Include short description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgBadge['label']): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-badge> prop \"label\" is required.');\n    }\n  }\n\n  /**\n   * Define button variant\n   */\n  @Prop() variant?: BadgeVariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-badge--${oldValue}`);\n      }\n      this.classCollection.add(`mg-badge--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if button is using outline style\n   */\n  @Prop() outline: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgBadge['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-badge']);\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateValue(this.value);\n    this.validateLabel(this.label);\n    this.validateVariant(this.variant);\n    this.validateOutline(this.outline);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <span class=\"mg-badge__value\">{this.value}</span>\n        <span class=\"sr-only\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-button.js

@@ -4,3 +4,5 @@ const MgButton = MgButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgButton, defineCustomElement };
+
+//# sourceMappingURL=mg-button.js.map

package/dist/components/mg-button.js.map

@@ -0,0 +1 @@
+{"file":"mg-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-button2.js

@@ -9,7 +9,7 @@ const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'
 
 const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled){background:hsl(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--link{padding:unset;min-height:unset;background:unset;border:unset;border-radius:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
 
-const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -162,6 +162,11 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "disableOnClick": [4, "disable-on-click"],
     "loading": [32],
     "classCollection": [32]
+  }, undefined, {
+    "variant": ["validateVariant"],
+    "fullWidth": ["validateFullWidth"],
+    "disabled": ["disabledHandler"],
+    "loading": ["loadingHandler"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -184,3 +189,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgButton as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-button2.js.map

package/dist/components/mg-button2.js.map

@@ -0,0 +1 @@
+{"file":"mg-button2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","src/components/atoms/mg-button/mg-button.scss?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n","/* Variables */\n$mg-button-border-width: 0.1rem;\n$mg-button-padding-horizontal: 1.1rem;\n$button-column-gap: 0.6rem;\n\n/* Mixins */\n@mixin style-gradient($name, $backgroundColor, $fontColor, $hasVariable: false) {\n  @if $hasVariable {\n    $backgroundColor: --mg-button-#{$name}-color;\n    $fontColor: --mg-button-#{$name}-font-color;\n  } @else {\n    $backgroundColor: --color-#{$backgroundColor};\n    $fontColor: --color-#{$fontColor};\n  }\n  .mg-button.mg-button--#{$name} {\n    // Decoration\n    border-color: hsl(\n      var(\n        #{--mg-button-#{$name}-border-color},\n        (var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), calc(var(#{$backgroundColor}-l) - var(--mg-button-border-variation) * 10%))\n      )\n    );\n    // Font\n    color: hsl(var(#{$fontColor}));\n    // Background\n    background: linear-gradient(\n      to bottom,\n      hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), var(#{$backgroundColor}-l)),\n      hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), calc(var(#{$backgroundColor}-l) - var(--mg-button-gradient) * 10%))\n    );\n  }\n  // Only apply if not disabled\n  :host(:hover) .mg-button--#{$name}:not(.mg-button--disabled) {\n    background: hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), var(#{$backgroundColor}-l));\n  }\n}\n\n@mixin font-style() {\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: var(--mg-button-font-weight, normal);\n  text-align: left;\n  font-size: var(--font-size);\n}\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  max-width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: 0;\n  // same style as chrome\n  .mg-button {\n    outline-color: -webkit-focus-ring-color;\n    outline-style: auto;\n    outline-width: 0.2rem;\n  }\n}\n\n// Only apply if not disabled\n:host(:hover) .mg-button--flat:not(.mg-button--disabled) {\n  background: hsl(var(--color-dark), 0.1);\n}\n\n:host([full-width]) {\n  display: block;\n}\n\n// Prevent click propagation when disabled\n:host([disabled]),\n:host([aria-disabled='true']) {\n  pointer-events: none;\n}\n\n// Gradient style\n@include style-gradient('primary', null, null, true);\n@include style-gradient('secondary', null, null, true);\n@include style-gradient('danger', 'danger', 'neutral');\n@include style-gradient('danger-alt', 'neutral', 'danger');\n@include style-gradient('info', 'info', 'neutral');\n@include style-gradient('success', 'success', 'dark');\n\n/* Styles */\n.mg-button {\n  // Display\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  column-gap: $button-column-gap;\n  padding: calc((var(--default-size) - (2 * $mg-button-border-width) - (var(--font-size) * var(--line-height))) / 2) $mg-button-padding-horizontal;\n  min-height: var(--default-size);\n  box-sizing: border-box;\n  // Decoration\n  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));\n  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));\n  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));\n  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));\n  cursor: pointer;\n  background-image: none;\n  border-top-width: var(--mg-button-border-top-width, $mg-button-border-width);\n  border-right-width: var(--mg-button-border-right-width, $mg-button-border-width);\n  border-bottom-width: var(--mg-button-border-bottom-width, $mg-button-border-width);\n  border-left-width: var(--mg-button-border-left-width, $mg-button-border-width);\n  border-style: solid;\n  // Font (necessary for stylesheet only)\n  @include font-style();\n  // Other\n  touch-action: manipulation;\n\n  // Disabled style\n  &.mg-button--disabled {\n    opacity: var(--mg-button-disabled-opacity);\n    cursor: default;\n  }\n\n  // Icon only button\n  &.mg-button--icon {\n    // Display\n    padding: 0;\n    justify-content: center;\n    width: var(--default-size);\n    height: var(--default-size);\n    // Decoration\n    border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));\n    border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));\n    border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));\n    border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));\n    // font\n    font-size: var(--font-size);\n    line-height: var(--font-size);\n  }\n\n  // Flat variant\n  &.mg-button--flat {\n    background: none;\n    border: none;\n  }\n\n  // Link variant\n  &.mg-button--link {\n    padding: unset;\n    min-height: unset;\n    background: unset;\n    border: unset;\n    border-radius: unset;\n    text-decoration: underline;\n\n    slot {\n      font-weight: 600;\n    }\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  // full-width style\n  &.mg-button--full-width {\n    display: flex;\n    justify-content: center;\n  }\n\n  // loading style\n  &.mg-button--loading {\n    > mg-icon:first-of-type {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .mg-button__content {\n      opacity: 0;\n    }\n  }\n\n  mg-icon:only-child,\n  ::slotted(mg-icon) {\n    display: inline-flex;\n    flex-shrink: 0;\n    line-height: 1;\n    margin: auto 0;\n  }\n\n  slot,\n  ::slotted(*:not(mg-icon)) {\n    // Font\n    @include font-style();\n    // Display\n    display: flex;\n    align-items: center;\n    column-gap: $button-column-gap;\n  }\n}\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-button',\n  styleUrl: 'mg-button.scss',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-button--disabled';\n  private readonly classLoading = 'mg-button--loading';\n  private readonly classFullWidth = 'mg-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop() variant: VariantType = variants[0]; // Primary\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-button--${newValue}`);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier: string;\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type: ButtonType;\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n   */\n  @Prop() form: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<MgButton['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    if (this.isIcon) {\n      this.classCollection.add(`mg-button--icon`);\n      if (typeof this.label !== 'string' || this.label.trim() === '') {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled !== undefined && this.disabled.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()} id={this.identifier}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-card.js

@@ -4,3 +4,5 @@ const MgCard = MgCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCard, defineCustomElement };
+
+//# sourceMappingURL=mg-card.js.map

package/dist/components/mg-card.js.map

@@ -0,0 +1 @@
+{"file":"mg-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-card2.js

@@ -12,7 +12,7 @@ const variantStyles = ['bar-left', 'fill'];
 
 const mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);min-width:var(--mg-card-min-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-min-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 {
+const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -81,6 +81,9 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "variantStyle": [1025, "variant-style"],
     "classCollection": [32]
+  }, undefined, {
+    "variant": ["validateVariant"],
+    "variantStyle": ["validateVariantStyle"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -98,3 +101,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCard as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-card2.js.map

package/dist/components/mg-card2.js.map

@@ -0,0 +1 @@
+{"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,0/EAA0/E;;MCS//E,MAAM;;;;;;;;IAKA,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,IAAI,CAAC,IAAI,CAAC;;;;;IA0C/B,2BAAsB,GAAG;MAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;KACrE,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAClF,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;;;;;;;EAsBD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC9C;;;;;EAMD,MAAM;;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,cAAc,GAAQ,EAC5E,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","src/components/atoms/mg-card/mg-card.scss?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n@function getColorPrefix($color) {\n  @if $color == 'app' {\n    @return 'mg-color';\n  }\n  @return 'color';\n}\n\n@mixin card-variants($variants...) {\n  @each $variant in $variants {\n    &.mg-card--#{$variant} {\n      overflow: hidden;\n      &.mg-card--bar-left .mg-card__bar {\n        background-color: hsl(var(--#{getColorPrefix($variant)}-#{$variant}-h), var(--#{getColorPrefix($variant)}-#{$variant}-s), var(--#{getColorPrefix($variant)}-#{$variant}-l));\n      }\n      &.mg-card--fill {\n        background-color: hsl(var(--#{getColorPrefix($variant)}-#{$variant}-h), var(--#{getColorPrefix($variant)}-#{$variant}-s), var(--mg-color-soft-l));\n      }\n    }\n  }\n}\n\n.mg-card {\n  // Display\n  position: relative;\n  width: 100%;\n  max-width: var(--mg-card-max-width);\n  min-width: var(--mg-card-min-width);\n  padding: var(--mg-card-padding, var(--mg-card-padding-default));\n  overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));\n  box-sizing: border-box;\n  z-index: inherit;\n  // Decoration\n  background: var(--mg-card-background, var(--mg-card-background-default));\n  border: var(--mg-card-border, var(--mg-card-border-default));\n  border-radius: var(--mg-card-border-radius, var(--mg-card-border-radius-default));\n  box-shadow: var(--mg-card-box-shadow, var(--mg-card-box-shadow-default));\n\n  @include reset-slot-card-variables();\n  @include card-variants('info', 'warning', 'success', 'danger', 'app');\n\n  &__bar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 0.3rem;\n    height: 100%;\n  }\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n  tag: 'mg-card',\n  styleUrl: 'mg-card.scss',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Private *\n   *************/\n\n  private readonly name = 'mg-card';\n  private readonly baseClass = this.name;\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define variant prop\n   */\n  @Prop() variant: undefined | VariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n    if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n    if (Boolean(newValue)) {\n      this.setDefaultVariantStyle();\n      this.classCollection.add(`${this.baseClass}--${newValue}`);\n    }\n    if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n  }\n\n  /**\n   * Define variantStyle prop\n   */\n  @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n    if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n    else if (Boolean(newValue) && !variants.includes(this.variant))\n      throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n    if (Boolean(newValue)) this.classCollection.add(`${this.baseClass}--${newValue}`);\n    if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.baseClass]);\n\n  /**\n   * Methode to set default varianStyle props\n   * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n   */\n  private setDefaultVariantStyle = (): void => {\n    if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        {this.variantStyle?.startsWith('bar-') && <span class=\"mg-card__bar\"></span>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,3 +4,5 @@ const MgCharacterLeft = MgCharacterLeft$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCharacterLeft, defineCustomElement };
+
+//# sourceMappingURL=mg-character-left.js.map

package/dist/components/mg-character-left.js.map

@@ -0,0 +1 @@
+{"file":"mg-character-left.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -3,7 +3,7 @@ import { i as initLocales } from './index2.js';
 
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
-const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,6 +42,8 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "identifier": [1],
     "characters": [1],
     "maxlength": [2]
+  }, undefined, {
+    "maxlength": ["validateMaxlength"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -59,3 +61,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCharacterLeft as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-character-left2.js.map