@mgdis/mg-components 5.18.0 → 5.19.1

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

@@ -1 +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\n/**\n * Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n"],"version":3}
+{"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\n/**\n * Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n\n/**\n * Clean string caraters\n * @param text - text to cliean\n * @returns cleanded string\n */\nexport const cleanString = (text: string): string =>\n  typeof text === 'string' &&\n  text\n    .toLocaleLowerCase()\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '');\n"],"version":3}

package/dist/components/index2.js

@@ -1,7 +1,7 @@
 const errors$1 = {
 	required: "This field is required.",
 	date: {
-		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
+		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"mg-u-visually-hidden\">m m / d d / y y y y</span> and the date must be greater than {min}",
 		min: "The date cannot be earlier than {min}",
 		max: "The date cannot be later than {max}",
 		minMax: "The date must be between {min} and {max}"
@@ -43,8 +43,8 @@ const input$1 = {
 	}
 };
 const form$1 = {
-	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
-	requiredSingle: "Field with a <strong class=\"is-asterisk\">*</strong> is required",
+	required: "Fields with a <strong class=\"mg-u-is-asterisk\">*</strong> are required",
+	requiredSingle: "Field with a <strong class=\"mg-u-is-asterisk\">*</strong> is required",
 	allRequired: "All fields are required",
 	allRequiredSingle: "The field is required"
 };
@@ -100,7 +100,7 @@ const en = {
 const errors = {
 	required: "Ce champ est obligatoire.",
 	date: {
-		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
+		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"mg-u-visually-hidden\">j j / m m / a a a a</span> et la date supérieure au {min}",
 		min: "La date ne peut pas être antérieure au {min}",
 		max: "La date ne peut pas être postérieure au {max}",
 		minMax: "La date doit être comprise entre le {min} et le {max}"
@@ -142,8 +142,8 @@ const input = {
 	}
 };
 const form = {
-	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
-	requiredSingle: "Le champ marqué d'un <strong class=\"is-asterisk\">*</strong> est obligatoire",
+	required: "Les champs marqués d'un <strong class=\"mg-u-is-asterisk\">*</strong> sont obligatoires",
+	requiredSingle: "Le champ marqué d'un <strong class=\"mg-u-is-asterisk\">*</strong> est obligatoire",
 	allRequired: "Tous les champs sont obligatoires",
 	allRequiredSingle: "Le champ est obligatoire"
 };

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

@@ -11,7 +11,7 @@ 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)}";
+const mgActionMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
 
 /**
  * MgActionMore['items'] type guard
@@ -49,12 +49,13 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore exten
      * Internal *
      ************/
     this.name = 'mg-action-more';
+    this.classBase = 'mg-c-action-more';
     this.mgPopoverIdentifier = createID(this.name);
     /************
      * Methods *
      ***********/
     /**
-     * Toogle expanded props
+     * Toggle expanded props
      */
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
@@ -91,7 +92,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore exten
     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)) {
+    else if (!(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
       this.icon = { icon: 'ellipsis' };
     }
   }
@@ -132,9 +133,8 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore exten
     const buttonContent = [buttonLabel];
     if (!this.button.isIcon && this.displayChevron) {
       buttonContent.push(h("span", { class: {
-          [`${this.name}__chevron`]: true,
-          [`${this.name}__chevron--rotate`]: this.expanded === true,
-          'mg-a11y-animation': true,
+          [`${this.classBase}__chevron`]: true,
+          [`${this.classBase}__chevron--rotate`]: this.expanded === 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, "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 => {

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

@@ -1 +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}
+{"file":"mg-action-more.js","mappings":"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","names":["MgActionMore"],"sources":["../styles/dist/components/mg-action-more.css?tag=mg-action-more&encapsulation=shadow","src/components/molecules/mg-action-more/mg-action-more.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-popover-padding-vertical: 1rem;--mg-popover-padding-horizontal: 0;--mg-popover-max-width: unset}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}/*# sourceMappingURL=mg-action-more.css.map */\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: '../../../../node_modules/@mgdis/styles/dist/components/mg-action-more.css',\n  shadow: true,\n})\nexport class MgActionMore {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-action-more';\n  private readonly classBase = 'mg-c-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 (!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   * Toggle 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.classBase}__chevron`]: true,\n            [`${this.classBase}__chevron--rotate`]: this.expanded === 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-badge2.js

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 
 /**
  * List of all possibles variants
  */
 const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
 
-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 mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
   constructor() {
@@ -17,20 +17,20 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
      * Internal *
      ************/
     // Classes
-    this.classOutline = `mg-badge--outline`;
+    this.classOutline = `mg-c-badge--outline`;
     this.value = undefined;
     this.label = undefined;
     this.variant = variants[0];
     this.outline = undefined;
-    this.classCollection = new ClassList(['mg-badge']);
+    this.classCollection = new ClassList(['mg-c-badge']);
   }
   validateValue(newValue) {
-    if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
+    if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
       throw new Error('<mg-badge> prop "value" must be integer or ponctuation character.');
     }
   }
   validateLabel(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-badge> prop "label" is required.');
     }
   }
@@ -40,9 +40,9 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-badge--${oldValue}`);
+        this.classCollection.delete(`mg-c-badge--${oldValue}`);
       }
-      this.classCollection.add(`mg-badge--${newValue}`);
+      this.classCollection.add(`mg-c-badge--${newValue}`);
     }
   }
   validateOutline(newValue) {
@@ -65,7 +65,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
    * @returns HTML Element
    */
   render() {
-    return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
+    return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-c-badge__value" }, this.value), h("span", { class: "mg-u-visually-hidden" }, this.label)));
   }
   static get watchers() { return {
     "value": ["validateValue"],

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

@@ -1 +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}
+{"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,yoFAAyoF;;MCQ/oF,OAAO;;;;;;;;;IAMD,iBAAY,GAAG,qBAAqB,CAAC;;;mBAgCjB,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;EA/CnE,aAAa,CAAC,QAA0B;IACtC,IAAI,sBAAsB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE;MACvD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;GACF;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,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,eAAe,QAAQ,EAAE,CAAC,CAAC;OACxD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;KACrD;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,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","../styles/dist/components/mg-badge.css?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",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}/*# sourceMappingURL=mg-badge.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-badge',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n  shadow: true,\n})\nexport class MgBadge {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = `mg-c-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 (/^(\\d+\\+*|[?*!a-z])$/i.exec(`${newValue}`) === 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 (!isValidString(newValue)) {\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-c-badge--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-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-c-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-c-badge__value\">{this.value}</span>\n        <span class=\"mg-u-visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 /**
@@ -7,7 +7,7 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
  */
 const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
 
-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 mgButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-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-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
   constructor() {
@@ -19,9 +19,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      * Internal *
      ************/
     this.onClickElementFn = null;
-    this.classDisabled = 'mg-button--disabled';
-    this.classLoading = 'mg-button--loading';
-    this.classFullWidth = 'mg-button--full-width';
+    this.classDisabled = 'mg-c-button--disabled';
+    this.classLoading = 'mg-c-button--loading';
+    this.classFullWidth = 'mg-c-button--full-width';
     /**
      * Trigger actions onClick event
      * @param event - click event
@@ -68,7 +68,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     this.isIcon = false;
     this.disableOnClick = false;
     this.loading = false;
-    this.classCollection = new ClassList(['mg-button']);
+    this.classCollection = new ClassList(['mg-c-button']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -76,9 +76,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-button--${oldValue}`);
+        this.classCollection.delete(`mg-c-button--${oldValue}`);
       }
-      this.classCollection.add(`mg-button--${newValue}`);
+      this.classCollection.add(`mg-c-button--${newValue}`);
     }
   }
   validateFullWidth(newValue) {
@@ -126,8 +126,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     this.validateVariant(this.variant);
     this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
-      this.classCollection.add(`mg-button--icon`);
-      if (typeof this.label !== 'string' || this.label.trim() === '') {
+      this.classCollection.add(`mg-c-button--icon`);
+      if (!isValidString(this.label)) {
         throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
       }
     }
@@ -140,7 +140,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
    * @returns html element
    */
   render() {
-    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
+    var _a;
+    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {

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

@@ -1 +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}
+{"file":"mg-button2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?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",":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-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%)));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%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-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-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/*# sourceMappingURL=mg-button.css.map */\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-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-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-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-c-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-c-button--icon`);\n      if (!isValidString(this.label)) {\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?.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-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-card2.js

@@ -10,7 +10,7 @@ const variants = ['info', 'warning', 'success', 'danger', 'app'];
  */
 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 mgCardCss = ".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-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-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
   constructor() {
@@ -21,7 +21,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
      * Private *
      *************/
     this.name = 'mg-card';
-    this.baseClass = this.name;
+    this.classBase = 'mg-c-card';
     /**
      * Methode to set default varianStyle props
      * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -32,27 +32,27 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
     };
     this.variant = undefined;
     this.variantStyle = undefined;
-    this.classCollection = new ClassList([this.baseClass]);
+    this.classCollection = new ClassList([this.classBase]);
   }
   validateVariant(newValue, oldValue) {
     if (newValue && !variants.includes(newValue))
       throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
-    if (Boolean(newValue)) {
+    if (newValue) {
       this.setDefaultVariantStyle();
-      this.classCollection.add(`${this.baseClass}--${newValue}`);
+      this.classCollection.add(`${this.classBase}--${newValue}`);
     }
-    if (Boolean(oldValue))
-      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
+    if (oldValue)
+      this.classCollection.delete(`${this.classBase}--${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.classCollection.add(`${this.baseClass}--${newValue}`);
-    if (Boolean(oldValue))
-      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
+    if (newValue)
+      this.classCollection.add(`${this.classBase}--${newValue}`);
+    if (oldValue)
+      this.classCollection.delete(`${this.classBase}--${oldValue}`);
   }
   /*************
    * Lifecycle *
@@ -70,7 +70,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
    */
   render() {
     var _a;
-    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
+    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", null)));
   }
   static get watchers() { return {
     "variant": ["validateVariant"],