@mgdis/mg-components 6.8.0 → 6.10.0

package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menus/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { directions, type MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport { type MgMenuStatusType, Status, targets, type TargetType } from './mg-menu-item.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { Direction } from '../../../../types';\n\n/**\n * @slot - Menu item content\n * @slot image - Menu item image content\n * @slot label - Menu item label content\n * @slot information - Menu item information content\n * @slot metadata - Menu item metadata content\n */\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n  private messages: MessageType;\n  private popoverIdentifier: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop({ reflect: true }) identifier = createID('mg-menu-item');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgMenuItem['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-menu-item> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    } else {\n      this.popoverIdentifier = `${this.identifier}-popover`;\n    }\n  }\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href?: string;\n\n  /**\n   * Define target type\n   */\n  @Prop() target?: TargetType;\n  @Watch('target')\n  watchTarget(newValue: MgMenuItem['target']): void {\n    if (newValue && !targets.includes(newValue)) {\n      throw new Error(`<mg-link> prop \"target\" must be one of: ${targets.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status?: MgMenuStatusType = 'visible';\n  @Watch('status')\n  watchStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded? = false;\n  @Watch('expanded')\n  watchExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') {\n      throw new Error(`<${this.name}> prop \"expanded\" must be a boolean. Passed value: ${toString(newValue)}.`);\n    } else {\n      this.updateExpanded(newValue);\n      // when expanded all actives sub-items need to be expanded and non active closed\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        if (item !== this.element) item.expanded = newValue ? this.hasStatus(item, Status.ACTIVE) : false;\n      });\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**\n   * Emited event when item is updated\n   */\n  @Event({ eventName: 'item-updated' }) itemUpdated: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'medium';\n  @Watch('size')\n  watchSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: Direction;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction'], oldValue: MgMenuItem['direction']): void {\n    if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n      if (this.isDirection(directions.VERTICAL, newValue)) {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      } else {\n        delete item.dataset.level;\n      }\n    });\n  }\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /**\n   * direction value in dataset\n   * @param newValue - new direction value\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('data-style-direction')\n  watchDataStyleDirection(newValue: Direction): void {\n    this.direction = newValue;\n  }\n\n  /**\n   * has focus value in dataset\n   * @param newValue - new direction value\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('data-has-focus')\n  watchDataHasFocus(newValue: string): void {\n    if (!isValidString(newValue)) this.updateExpanded(Boolean(newValue));\n  }\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Get parent menu\n   * @returns parent menu\n   */\n  private getParentMenu = (): HTMLMgMenuElement => this.element.closest('mg-menu');\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private hasPopover = (): boolean =>\n    this.isDirection(directions.HORIZONTAL) &&\n    ((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&\n    this.href === undefined;\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'),\n    );\n\n  /**\n   * Is component an interactive item\n   * @returns truthy if element is clickable\n   */\n  private isInteractiveItem = (): boolean => this.hasChildren || !isValidString(this.href);\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Does component is in main menu\n   * @returns true if component is in main menu\n   */\n  private isInMainMenu = (): boolean => this.getParentMenu() !== null && this.element.parentElement.closest('mg-menu-item') === null;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null && Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));\n  };\n\n  /**\n   * Update expanded prop\n   * @param newValue - expanded new value\n   */\n  private updateExpanded = (newValue: MgMenuItem['expanded']): void => {\n    if (this.isInteractiveItem()) {\n      // item is always expanded in vertical menu when has active child\n      this.expanded = (this.isDirection(directions.VERTICAL) && this.hasActiveChild()) || newValue;\n    }\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard: MgMenuItem['status'][] = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    const subItem: HTMLElement = this.element.querySelector('*:not([slot])');\n    if (subItem === null) return;\n    if (this.hasPopover()) subItem.dataset.mgPopoverGuard = this.popoverIdentifier;\n    else delete subItem.dataset.mgPopoverGuard;\n  }\n\n  /**\n   * Update slots\n   * @param guard - prevent action with guard. Default: false.\n   */\n  private updateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {\n      throw new Error(`<${this.name}> slot \"label\" is required.`);\n    }\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && !element.hasAttribute('title')) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update menu item\n   * @param guard - prevent action with guard\n   */\n  private updateItem = (guard?: MgMenuItem['status'][]): void => {\n    const menu = this.getParentMenu();\n\n    // define element size\n    if (menu?.size !== undefined && !this.isItemMore) this.size = menu.size;\n    else if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n    // when vertical main menu item contain an active item we force expanded\n    this.updateExpanded(this.expanded);\n    this.updateStatus(guard);\n    this.updatePopoverGuard();\n    this.updateDisplayNotificationBadge();\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if (this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // for non \"poperized\" menu-item we toggle expanded manualy\n    this.updateExpanded(!this.expanded);\n\n    // when item is the last clickable item we close the parent popover\n    if (!this.isInteractiveItem()) {\n      const closePopover = (element: HTMLMgMenuItemElement): void => {\n        if (element === null) return;\n        else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {\n          element.expanded = false;\n        } else {\n          closePopover(element.parentElement.closest('mg-menu-item'));\n        }\n      };\n      closePopover(this.element);\n    }\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.updateExpanded(event.detail);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.messages = initLocales(this.element).messages.menuItem as MessageType;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // watchers\n    this.watchStatus(this.status);\n    this.watchExpanded(this.expanded);\n    this.watchTarget(this.target);\n    this.watchIdentifier(this.identifier);\n    this.watchSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.updateSlot(true);\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.watchDataStyleDirection(this.element.dataset.styleDirection as Direction);\n      this.watchDataHasFocus(this.element.dataset.hasFocus);\n      this.updateItem([Status.ACTIVE]);\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName))) this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.updateSlot();\n        if (mutationsList.some(mutation => mutation.type === 'childList')) this.updateItem();\n        this.itemUpdated.emit();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Emit event when component is updated\n   * @returns promise process wich emit the 'item-updated' event\n   */\n  componentShouldUpdate(): Promise<void> {\n    return nextTick(() => {\n      this.itemUpdated.emit();\n    });\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        target={this.href !== undefined && this.target !== undefined ? this.target : undefined}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class={`${this.navigationButton}-text-content-notification`}>\n                <mg-badge label={this.messages.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n            {this.target === '_blank' && [\n              <mg-icon key=\"icon-new-tab\" class={`${this.navigationButton}-new-tab`} icon=\"arrow-up-right-square\"></mg-icon>,\n              <span key=\"a11y-new-tab\" class=\"mg-u-visually-hidden\">\n                {this.messages.openNewTab}\n              </span>,\n            ]}\n          </div>\n          {this.size !== 'medium' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      ['mg-c-menu-item__collapse-container']: true,\n      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.hasPopover() ? (\n          <mg-popover\n            display={this.expanded}\n            placement=\"bottom-start\"\n            arrowHide={true}\n            onDisplay-change={this.handlePopoverDisplay}\n            identifier={this.popoverIdentifier}\n            data-fallback-placement=\"bottom-end\" // use for the last element of the menu if it is placed on the right side\n          >\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-action-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgButton } from '../../atoms/mg-button/mg-button';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport type { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';\n\n/**\n * prop icon type\n */\nexport type MgActionMoreIconType = Pick<MgIcon, 'icon'>;\n\n/**\n * prop button type\n */\nexport type MgActionMoreButtonType = Pick<MgButton, 'isIcon' | 'variant' | 'label' | 'disabled'>;\n\n/**\n * locals message type\n */\nexport type MgActionMoreMessageType = { label: string };\n\n/**\n * prop item type\n */\nexport type MgActionMoreItemType = Pick<MgMenuItem, 'status' | 'href' | 'target'> & {\n  label: string;\n  mouseEventHandler: IMouseEventHandler;\n  icon?: Pick<MgIcon, 'icon'> & Partial<Pick<MgIcon, 'variant' | 'variantStyle'>>;\n  badge?: Pick<MgBadge, 'value' | 'label'>;\n};\n\n/**\n * prop item divider type\n */\nexport type MgActionMoreDividerType = { isDivider: boolean };\n\n/**\n * MouseEvent callback interface\n */\ntype IMouseEventHandler = (event: MouseEvent) => void;\n"]}
+{"version":3,"file":"mg-action-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgButton } from '../../atoms/mg-button/mg-button';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport type { MgMenuItem } from '../menus/mg-menu-item/mg-menu-item';\n\n/**\n * prop icon type\n */\nexport type MgActionMoreIconType = Pick<MgIcon, 'icon'>;\n\n/**\n * prop button type\n */\nexport type MgActionMoreButtonType = Pick<MgButton, 'isIcon' | 'variant' | 'label' | 'disabled'>;\n\n/**\n * locals message type\n */\nexport type MgActionMoreMessageType = { label: string };\n\n/**\n * prop item type\n */\nexport type MgActionMoreItemType = Pick<MgMenuItem, 'status' | 'href' | 'target'> & {\n  label: string;\n  mouseEventHandler: IMouseEventHandler;\n  icon?: Pick<MgIcon, 'icon'> & Partial<Pick<MgIcon, 'variant' | 'variantStyle'>>;\n  badge?: Pick<MgBadge, 'value' | 'label'>;\n};\n\n/**\n * prop item divider type\n */\nexport type MgActionMoreDividerType = { isDivider: boolean };\n\n/**\n * MouseEvent callback interface\n */\ntype IMouseEventHandler = (event: MouseEvent) => void;\n"]}

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { createID, toString } from "@mgdis/stencil-helpers";
-import { Status } from "../menu/mg-menu-item/mg-menu-item.conf";
-import { directions } from "../menu/mg-menu/mg-menu.conf";
+import { Status } from "../menus/mg-menu-item/mg-menu-item.conf";
+import { directions } from "../menus/mg-menu/mg-menu.conf";
 import { initLocales } from "../../../locales";
 /**
  * MgActionMore['items'] type guard
@@ -49,6 +49,10 @@ export class MgActionMore {
          * Define button properties
          */
         this.button = { variant: 'flat', isIcon: true };
+        /**
+         * Define if chevron is display
+         */
+        this.displayChevron = false;
         /**
          * Menu expanded state
          */
@@ -137,9 +141,9 @@ export class MgActionMore {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: '2bb195242da00b4235d1c7e208d1f7ca72189a94', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'e9b1e0d8996886aef957f95e5c4276c584f80525', class: this.classBase }, h("mg-popover", { key: '8700af5584bb46e3b04b887b3d42d1660c0ef140', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '70442ce629cc40ea412ce3b6c93f8aab3abfa567', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: '85de555a598ac2097fb6586bbfab4ccda47721d1' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '3881ef2f2453a7f6bb8a16f56fd58899d4a44ab3', slot: "content" }, h("mg-menu", { key: 'ad3fb64141e696c4dfdf19743b035347ea212a39', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: '655b4be7b0b17db8ad6e2d688f59c18f2750dfe4', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '19f5763f7732fb156803fb6a24f776f182d230f4', class: this.classBase }, h("mg-popover", { key: '617fefddd54794e3f3da60e700e1c60e0758c66b', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: 'c9ef1d8f771b015ddb5b8f280c3657e74606ef22', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'ded976da4cd3a457a232aee9613dc9e108c35358' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'e3308c1e0ae198f204c283408f9c3afc154ddf21', slot: "content" }, h("mg-menu", { key: '70c222a09f42b938f56a5bb02fa4193ca8f47788', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
-            return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
+            return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind
                 onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
         })))))));
@@ -242,7 +246,7 @@ export class MgActionMore {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Define if chevron is display"
@@ -250,7 +254,8 @@ export class MgActionMore {
                 "getter": false,
                 "setter": false,
                 "attribute": "display-chevron",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { createID, toString } from '@mgdis/stencil-helpers';\nimport { Status } from '../menu/mg-menu-item/mg-menu-item.conf';\nimport { directions } from '../menu/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../locales';\nimport type { MessageType } from '../../../locales/index.conf';\nimport type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreDividerType } from './mg-action-more.conf';\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 (\n    typeof items === 'object' &&\n    items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item))\n  );\n};\n\n/**\n * MgActionMoreDividerType type guard\n * @param item - component item\n * @returns return true if type is valid\n */\nconst isMgActionMoreDivider = (item: unknown): item is MgActionMoreDividerType => typeof item === 'object' && (item as MgActionMoreDividerType).isDivider;\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: MessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgActionMoreElement;\n\n  /**\n   * Define the menu-items elements\n   */\n  @Prop() items!: (MgActionMoreItemType | MgActionMoreDividerType)[];\n  @Watch('items')\n  validateItems(newValue: MgActionMore['items']): void {\n    if (!isMgActionMoreItems(newValue)) {\n      throw new Error(\n        `<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`,\n      );\n    } else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {\n      throw new Error(`<${this.name}> prop \"items\" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define displayed 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. Passed value: ${toString(newValue)}.`);\n    } else if (newValue?.icon === undefined && 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. Passed value: ${toString(newValue)}.`);\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 MessageType;\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\"></mg-icon>\n        </span>,\n      );\n    }\n\n    return (\n      <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n        <span class={this.classBase}>\n          <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n            <mg-button variant={this.button.variant} isIcon={this.button.isIcon} disabled={this.button.disabled} 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={directions.VERTICAL} label={this.messages.label}>\n                {this.items.map(item =>\n                  isMgActionMoreDivider(item) ? (\n                    <mg-divider class=\"mg-c-action-more__divider\" key=\"divider\"></mg-divider>\n                  ) : (\n                    <mg-menu-item\n                      key={item.label}\n                      status={item.status || Status.VISIBLE}\n                      target={item.target}\n                      href={item.href}\n                      // eslint-disable-next-line react/jsx-no-bind\n                      onClick={e => this.handleItemClick(e, item.mouseEventHandler)}\n                    >\n                      {item.icon?.icon && <mg-icon icon={item.icon.icon} variant={item.icon.variant} variantStyle={item.icon.variantStyle} 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                )}\n              </mg-menu>\n            </div>\n          </mg-popover>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { createID, toString } from '@mgdis/stencil-helpers';\nimport { Status } from '../menus/mg-menu-item/mg-menu-item.conf';\nimport { directions } from '../menus/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../locales';\nimport type { MessageType } from '../../../locales/index.conf';\nimport type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreDividerType } from './mg-action-more.conf';\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 (\n    typeof items === 'object' &&\n    items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item))\n  );\n};\n\n/**\n * MgActionMoreDividerType type guard\n * @param item - component item\n * @returns return true if type is valid\n */\nconst isMgActionMoreDivider = (item: unknown): item is MgActionMoreDividerType => typeof item === 'object' && (item as MgActionMoreDividerType).isDivider;\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: MessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgActionMoreElement;\n\n  /**\n   * Define the menu-items elements\n   */\n  @Prop() items!: (MgActionMoreItemType | MgActionMoreDividerType)[];\n  @Watch('items')\n  validateItems(newValue: MgActionMore['items']): void {\n    if (!isMgActionMoreItems(newValue)) {\n      throw new Error(\n        `<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`,\n      );\n    } else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {\n      throw new Error(`<${this.name}> prop \"items\" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define displayed 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. Passed value: ${toString(newValue)}.`);\n    } else if (newValue?.icon === undefined && 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. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if chevron is display\n   */\n  @Prop() displayChevron = false;\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 MessageType;\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\"></mg-icon>\n        </span>,\n      );\n    }\n\n    return (\n      <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n        <span class={this.classBase}>\n          <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n            <mg-button variant={this.button.variant} isIcon={this.button.isIcon} disabled={this.button.disabled} 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={directions.VERTICAL} label={this.messages.label}>\n                {this.items.map(item =>\n                  isMgActionMoreDivider(item) ? (\n                    <mg-divider class=\"mg-c-action-more__divider\" key=\"divider\" full-width></mg-divider>\n                  ) : (\n                    <mg-menu-item\n                      key={item.label}\n                      status={item.status || Status.VISIBLE}\n                      target={item.target}\n                      href={item.href}\n                      // eslint-disable-next-line react/jsx-no-bind\n                      onClick={e => this.handleItemClick(e, item.mouseEventHandler)}\n                    >\n                      {item.icon?.icon && <mg-icon icon={item.icon.icon} variant={item.icon.variant} variantStyle={item.icon.variantStyle} 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                )}\n              </mg-menu>\n            </div>\n          </mg-popover>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-alert/mg-alert.js

@@ -18,6 +18,14 @@ export class MgAlert {
         // Manage hover
         this.isFocused = false;
         this.isHovered = false;
+        /**
+         * Define variant
+         */
+        this.variant = 'info';
+        /**
+         * Define variant style
+         */
+        this.variantStyle = 'bar-left';
         /**
          * Component classes
          */
@@ -134,7 +142,7 @@ export class MgAlert {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '3978c0f16d1577cf9e488f75d710e6580e0064f5', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '5e7dc7c38d5c2b6bbb65b8dd26d0eb3f499b5a2f' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '25a886be17d690dfcbffea51dca06a8a102a4926', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: 'ddf8c61b96ee376384c28b81b0a16ff72c0e6dd1' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     static get is() { return "mg-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -192,7 +200,8 @@ export class MgAlert {
                 "getter": false,
                 "setter": false,
                 "attribute": "variant",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'info'"
             },
             "variantStyle": {
                 "type": "string",
@@ -217,7 +226,8 @@ export class MgAlert {
                 "getter": false,
                 "setter": false,
                 "attribute": "variant-style",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'bar-left'"
             }
         };
     }

package/dist/collection/components/molecules/mg-alert/mg-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-alert.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-alert/mg-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, forceUpdate } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-alert.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * @slot - Alert content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-alert',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-alert.css',\n  shadow: true,\n})\nexport class MgAlert {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classCloseButton = 'mg-c-alert--close-button';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgAlertElement;\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds\n   */\n  @Prop() delay?: number;\n  @Watch('delay')\n  watchDelay(newValue: MgAlert['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-alert> prop \"delay\" must be greater than 2 seconds. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define variant\n   */\n  @Prop() variant?: VariantType;\n  @Watch('variant')\n  watchVariant(newValue: MgAlert['variant']): void {\n    if (newValue && !variants.includes(newValue)) {\n      throw new Error(`<mg-alert> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define variant style\n   */\n  @Prop() variantStyle?: VariantStyleType;\n  @Watch('variantStyle')\n  watchVariantStyle(newValue: MgAlert['variantStyle']): void {\n    if (newValue && !variantStyles.includes(newValue)) {\n      throw new Error(`<mg-alert> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Watch hidden prop\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('hidden')\n  watchHidden(newValue: boolean): void {\n    if (typeof newValue === 'string' && newValue === '') {\n      newValue = true;\n    }\n    if (newValue) {\n      this.componentHide.emit();\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n    forceUpdate(this);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-alert']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when alert is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emited event when alert is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Emmited event when alert is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.element.hidden = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.element.hidden = true;\n    this.componentClose.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.watchVariant(this.variant);\n    this.watchVariantStyle(this.variantStyle);\n    this.watchDelay(this.delay);\n    this.watchHidden(this.element.hidden);\n    // Check if component has actions slot\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    if (!this.hasActions) {\n      this.classCollection.add(this.classCloseButton);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-message\n        class={this.classCollection.join()}\n        role={['info', 'success'].includes(this.variant) ? 'status' : 'alert'}\n        variant={this.variant}\n        variantStyle={this.variantStyle}\n      >\n        <slot></slot>\n        {this.hasActions ? (\n          <span slot=\"actions\">\n            <slot name=\"actions\"></slot>\n          </span>\n        ) : (\n          <span class=\"mg-c-alert__close-button\">\n            <mg-button is-icon variant=\"flat\" label={this.messages.alert.closeButton} onClick={this.handleClose}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          </span>\n        )}\n      </mg-message>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-alert.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-alert/mg-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, forceUpdate } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-alert.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * @slot - Alert content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-alert',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-alert.css',\n  shadow: true,\n})\nexport class MgAlert {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classCloseButton = 'mg-c-alert--close-button';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgAlertElement;\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds\n   */\n  @Prop() delay?: number;\n  @Watch('delay')\n  watchDelay(newValue: MgAlert['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-alert> prop \"delay\" must be greater than 2 seconds. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define variant\n   */\n  @Prop() variant?: VariantType = 'info';\n  @Watch('variant')\n  watchVariant(newValue: MgAlert['variant']): void {\n    if (newValue && !variants.includes(newValue)) {\n      throw new Error(`<mg-alert> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define variant style\n   */\n  @Prop() variantStyle?: VariantStyleType = 'bar-left';\n  @Watch('variantStyle')\n  watchVariantStyle(newValue: MgAlert['variantStyle']): void {\n    if (newValue && !variantStyles.includes(newValue)) {\n      throw new Error(`<mg-alert> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Watch hidden prop\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('hidden')\n  watchHidden(newValue: boolean): void {\n    if (typeof newValue === 'string' && newValue === '') {\n      newValue = true;\n    }\n    if (newValue) {\n      this.componentHide.emit();\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n    forceUpdate(this);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-alert']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when alert is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emited event when alert is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Emmited event when alert is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.element.hidden = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.element.hidden = true;\n    this.componentClose.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.watchVariant(this.variant);\n    this.watchVariantStyle(this.variantStyle);\n    this.watchDelay(this.delay);\n    this.watchHidden(this.element.hidden);\n    // Check if component has actions slot\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    if (!this.hasActions) {\n      this.classCollection.add(this.classCloseButton);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-message\n        class={this.classCollection.join()}\n        role={['info', 'success'].includes(this.variant) ? 'status' : 'alert'}\n        variant={this.variant}\n        variantStyle={this.variantStyle}\n      >\n        <slot></slot>\n        {this.hasActions ? (\n          <span slot=\"actions\">\n            <slot name=\"actions\"></slot>\n          </span>\n        ) : (\n          <span class=\"mg-c-alert__close-button\">\n            <mg-button is-icon variant=\"flat\" label={this.messages.alert.closeButton} onClick={this.handleClose}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          </span>\n        )}\n      </mg-message>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -39,8 +39,9 @@ export class MgDetails {
         this.validateTitles(this.toggleClosed);
         this.validateTitles(this.toggleOpened);
         this.element.addEventListener('click', (event) => {
-            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
                 event.preventDefault();
+            }
         });
     }
     /**
@@ -48,7 +49,7 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '941fc56c10cd54a7975dc9b8adf5b7e24dfe89ce', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '8e0a1107069245a5920d28dced132ab73b25dcf1' }, h("slot", { key: '9530891ab1e8e60a1725aa146146bbd846bb7869', name: "summary" }), h("span", { key: '60163fa52f9c96bc15d60a016a2f17c3327f2b2f', class: "mg-c-details__toggle" }, h("mg-icon", { key: '69c033059e73b5ab336dfe5aeac122b78c65adbf', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '341d8915d9327cf811c21e4021446ff77b471029', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '6681fe531a0076a8c016b55c6223492ac5613da4', class: "mg-c-details__details" }, h("slot", { key: 'a09d6f88af12ee0756c9f86d0adcbf01903461c5', name: "details" }))));
+        return (h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-details/mg-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-details.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-details/mg-details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAyCE;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAW1C;;WAEG;QACK,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QACpC,CAAC,CAAC;KAqCH;IArEC,cAAc,CAAC,QAAgB;QAC7B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CACb,4HAA4H,IAAI,CAAC,YAAY,yBAAyB,IAAI,CAAC,YAAY,KAAK,CAC7L,CAAC;QACJ,CAAC;IACH,CAAC;IAYD,cAAc,CAAC,QAAiB;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAcD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C,EAAE,EAAE;YACrF,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAC;QAC5G,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,gEAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClI;gBACE,6DAAM,IAAI,EAAC,SAAS,GAAQ;gBAC5B,6DAAM,KAAK,EAAC,sBAAsB;oBAChC,gEAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY;oBACzI,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC;YACV,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot summary - Summary content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-details',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgDetailsElement;\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (!isValidString(newValue)) {\n      throw new Error(\n        `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n      if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]')) event.preventDefault();\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-c-details__toggle\">\n            <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-c-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-details.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-details/mg-details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAyCE;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAW1C;;WAEG;QACK,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QACpC,CAAC,CAAC;KAuCH;IAvEC,cAAc,CAAC,QAAgB;QAC7B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CACb,4HAA4H,IAAI,CAAC,YAAY,yBAAyB,IAAI,CAAC,YAAY,KAAK,CAC7L,CAAC;QACJ,CAAC;IACH,CAAC;IAYD,cAAc,CAAC,QAAiB;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAcD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C,EAAE,EAAE;YACrF,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC3F,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,gEAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClI;gBACE,6DAAM,IAAI,EAAC,SAAS,GAAQ;gBAC5B,6DAAM,KAAK,EAAC,sBAAsB;oBAChC,gEAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY;oBACzI,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC;YACV,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot summary - Summary content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-details',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgDetailsElement;\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (!isValidString(newValue)) {\n      throw new Error(\n        `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n      if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]') !== null) {\n        event.preventDefault();\n      }\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-c-details__toggle\">\n            <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-c-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-form/mg-form.js

@@ -25,6 +25,10 @@ export class MgForm {
          * Define if form is readonly
          */
         this.readonly = false;
+        /**
+         * Define if slotted mg-component's label are displayed on top
+         */
+        this.labelOnTop = false;
         /**
          * Define if form is disabled
          */
@@ -220,7 +224,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'a592ab555ddc0a5132fdf99b3de102d95ef8cc30', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'c7a0b19f51394d16bb80de4e0995e22213a6dc17', innerHTML: this.requiredMessageText }), h("slot", { key: 'd6b6c2f15b3a0f1ca93c46506b892bf4bab8f095' }), !this.readonly && !this.disabled && h("slot", { key: 'b758ae4e77d9534b44673494b536134526596651', name: "actions" })));
+        return (h("form", { key: '444703cae8a5374a86adc1dcaf048665f06e795f', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '1a936dfeb41a257be7b44afada7bd435f9a357f0', innerHTML: this.requiredMessageText }), h("slot", { key: 'a446094e8658b02c5a9baf7b19d77ca11b1432e9' }), !this.readonly && !this.disabled && h("slot", { key: '41f4e1c80a0f78b112eaac1d5bc53a219eee926e', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }
@@ -355,7 +359,7 @@ export class MgForm {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Define if slotted mg-component's label are displayed on top"
@@ -363,7 +367,8 @@ export class MgForm {
                 "getter": false,
                 "setter": false,
                 "attribute": "label-on-top",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",

package/dist/collection/components/molecules/mg-form/mg-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-form.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-form/mg-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/mg-input/mg-input.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n/**\n * @slot - Form content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-form',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n  shadow: true,\n})\nexport class MgForm {\n  /************\n   * Internal *\n   ************/\n\n  private mgInputs: (HTMLMgInputsElement & { disabled: boolean })[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-c-form--all-required';\n  private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgFormElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-form');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgForm['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-form> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Define if form is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define when required message is display.\n   * When it is unset, component use it internal logic to manage \"required message\" help text display.\n   * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n   * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n   * As **this element is an accessibility requirement in the view**,\n   * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n   */\n  @Prop() requiredMessage?: RequiredMessageStatusType;\n  @Watch('requiredMessage')\n  validateRequiredMessage(newValue): void {\n    if (newValue && !requiredMessageStatus.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define `<form/>` element aria role\n   * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n   */\n  @Prop() ariaRole?: AriaRoleType;\n  @Watch('ariaRole')\n  validateAriaRole(newValue: MgForm['ariaRole']) {\n    if (newValue && !roles.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if slotted mg-component's label are displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n  @Watch('labelOnTop')\n  handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n    if (newValue) {\n      this.classCollection.add(this.classLabelOnTop);\n    } else {\n      this.classCollection.delete(this.classLabelOnTop);\n    }\n  }\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('requiredMessage')\n  handleAttributeChange(): void {\n    this.setMgInputs();\n    this.setRequiredMessage();\n  }\n\n  /**\n   * Define form valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define form invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessageText: string;\n\n  /**\n   * Emitted event on form validity check\n   * Tells if form is valid or not\n   */\n  @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n  /**\n   * Emitted event on form submit\n   */\n  @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError?.();\n      });\n      this.checkValidity();\n    }\n  }\n\n  /**\n   * Reset form inputs values, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      await Promise.all(\n        this.mgInputs.map(async input => {\n          if (input.reset !== undefined) {\n            await input.reset();\n          }\n        }),\n      );\n    }\n  }\n\n  /**\n   * Define required message based on mg-inputs required elements\n   */\n  private setRequiredMessage = (): void => {\n    // init required message\n    this.requiredMessageText = null;\n    this.classCollection.delete(this.classAllRequired);\n\n    if (this.requiredMessage === 'hide') return;\n    else if (this.requiredMessage === 'default') {\n      this.requiredMessageText = this.messages.form.required;\n      return;\n    }\n\n    // If the form is disabled or readonly none of them are required\n    // Check if all fields are not editable (readonly or disabled)\n    const isEditable = input => !(input.disabled || input.readonly);\n    const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n    if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n      // Get editable inputs\n      const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n      // Get required inputs\n      // mg-input-toggle can not be required\n      const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n      // All inputs are required\n      if (\n        [requiredInputs.length, editableInputs.length].every(length => length === 1) ||\n        (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n      ) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n        this.classCollection.add(this.classAllRequired);\n      }\n      // Some fields are required\n      else if (requiredInputs.length > 0) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n      }\n    }\n  };\n\n  /**\n   * Returns a required message based on the count of required inputs.\n   * @param requiredInputs - An array of required input elements.\n   * @param keySingle - The key for the singular message format.\n   * @param keyPlural - The key for the plural message format.\n   * @returns The appropriate required message based on the count of required inputs.\n   */\n  private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n    this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n  /**\n   * Check if form is valid\n   */\n  private checkValidity = (): void => {\n    // Update required on input event\n    this.setRequiredMessage();\n\n    this.valid = !this.mgInputs.some(input => input.invalid);\n    this.invalid = !this.valid;\n    // We need to send valid event if it is the same value\n    this.formValid.emit(this.valid);\n  };\n\n  /**\n   * Handle Form Submit\n   * @param event - submit event\n   */\n  private handleFormSubmit = (event: SubmitEvent): void => {\n    event.preventDefault();\n    this.formSubmit.emit();\n  };\n\n  /**\n   * Set mgInputs\n   */\n  private setMgInputs = (): void => {\n    // Get slotted mgInputs\n    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT')) as (HTMLMgInputsElement & { disabled: boolean })[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.labelOnTop) {\n        input.labelOnTop = true;\n      }\n      if (this.readonly) {\n        input.readonly = true;\n      } else if (this.disabled) {\n        input.disabled = true;\n      } else {\n        input.addEventListener('input-valid', this.checkValidity);\n      }\n    });\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    this.watchIdentifier(this.identifier);\n    this.validateAriaRole(this.ariaRole);\n    this.validateRequiredMessage(this.requiredMessage);\n    this.handlelabelOnTop(this.labelOnTop);\n\n    // Get slotted mgButtons\n    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n    // Set button form identifier\n    this.mgButtons.forEach(mgButton => {\n      mgButton.setAttribute('form', this.identifier);\n    });\n\n    // Set mgInputs\n    this.setMgInputs();\n\n    // Check validity when slotted mgInputs are ready\n    Promise.all(\n      this.mgInputs.map(async input => {\n        try {\n          await input.componentOnReady();\n        } catch {} // prevent error with VueJS first render\n      }),\n    ).then(() => {\n      // Define required message and check validity\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    // Update mgInputs when mgForm content change\n    const observerOptions = { childList: true, subtree: true };\n    new MutationObserver(mutations => {\n      if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {\n        this.setMgInputs();\n        this.checkValidity();\n      }\n    }).observe(this.element, observerOptions);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n        {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-form.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-form/mg-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAgB,qBAAqB,EAA6B,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvG;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAaE,UAAU;QACO,qBAAgB,GAAG,yBAAyB,CAAC;QAC7C,oBAAe,GAAG,yBAAyB,CAAC;QAc7D;;;WAGG;QACK,eAAU,GAAW,QAAQ,CAAC,SAAS,CAAC,CAAC;QAQjD;;;WAGG;QACK,SAAI,GAAW,IAAI,CAAC,UAAU,CAAC;QAEvC;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QA8BzB;;WAEG;QACK,eAAU,GAAG,KAAK,CAAC;QAS3B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAmBzB;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;QA+CnE;;WAEG;QACK,uBAAkB,GAAG,GAAS,EAAE;YACtC,wBAAwB;YACxB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAEnD,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM;gBAAE,OAAO;iBACvC,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;gBAC5C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACvD,OAAO;YACT,CAAC;YAED,gEAAgE;YAChE,8DAA8D;YAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;YAChE,MAAM,eAAe,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,iBAAiB,CAAC;YACtE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;gBAClH,sBAAsB;gBACtB,MAAM,cAAc,GAA0B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBAC/E,sBAAsB;gBACtB,sCAAsC;gBACtC,MAAM,cAAc,GAA0B,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxH,0BAA0B;gBAC1B,IACE,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;oBAC5E,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EACvH,CAAC;oBACD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC;oBACnH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBAClD,CAAC;gBACD,2BAA2B;qBACtB,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBACnC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC;gBAC/G,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF;;;;;;WAMG;QACK,mCAA8B,GAAG,CAAC,cAAqC,EAAE,SAAiB,EAAE,SAAiB,EAAE,EAAE,CACvH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAE1E;;WAEG;QACK,kBAAa,GAAG,GAAS,EAAE;YACjC,iCAAiC;YACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACzD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,sDAAsD;YACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC;QAEF;;;WAGG;QACK,qBAAgB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACtD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,uBAAuB;YACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC,CAAoD,CAAC;YAC/K,8DAA8D;YAC9D,4BAA4B;YAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBAC5B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;oBACpB,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;gBAC1B,CAAC;gBACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACxB,CAAC;qBAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACzB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACxB,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;KAqEH;IAjSC,eAAe,CAAC,QAA8B;QAC5C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,OAAO,CAAC,KAAK,CAAC,+DAA+D,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACtG,CAAC;IACH,CAAC;IAuBD,uBAAuB,CAAC,QAAQ;QAC9B,IAAI,QAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1D,MAAM,IAAI,KAAK,CAAC,oDAAoD,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAChJ,CAAC;IACH,CAAC;IAQD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1C,MAAM,IAAI,KAAK,CAAC,6CAA6C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACzH,CAAC;IACH,CAAC;IAOD,gBAAgB,CAAC,QAA8B;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAiCD;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;gBAC5B,MAAA,KAAK,CAAC,YAAY,qDAAI,CAAC;YACzB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,OAAO,CAAC,GAAG,CACf,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAC,KAAK,EAAC,EAAE;gBAC9B,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;oBAC9B,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IA+FD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEvC,wBAAwB;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;QAExE,6BAA6B;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAChC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,eAAe;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,iDAAiD;QACjD,OAAO,CAAC,GAAG,CACT,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAC,KAAK,EAAC,EAAE;YAC9B,IAAI,CAAC;gBACH,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;YACjC,CAAC;YAAC,WAAM,CAAC,CAAA,CAAC,CAAC,wCAAwC;QACrD,CAAC,CAAC,CACH,CAAC,IAAI,CAAC,GAAG,EAAE;YACV,6CAA6C;YAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,6CAA6C;QAC7C,MAAM,eAAe,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAC3D,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAC/B,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;gBACrF,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ;YACjI,IAAI,CAAC,mBAAmB,IAAI,0DAAG,SAAS,EAAE,IAAI,CAAC,mBAAmB,GAAM;YACzE,8DAAa;YACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC5D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/mg-input/mg-input.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n/**\n * @slot - Form content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-form',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n  shadow: true,\n})\nexport class MgForm {\n  /************\n   * Internal *\n   ************/\n\n  private mgInputs: (HTMLMgInputsElement & { disabled: boolean })[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-c-form--all-required';\n  private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgFormElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-form');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgForm['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-form> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Define if form is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define when required message is display.\n   * When it is unset, component use it internal logic to manage \"required message\" help text display.\n   * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n   * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n   * As **this element is an accessibility requirement in the view**,\n   * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n   */\n  @Prop() requiredMessage?: RequiredMessageStatusType;\n  @Watch('requiredMessage')\n  validateRequiredMessage(newValue): void {\n    if (newValue && !requiredMessageStatus.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define `<form/>` element aria role\n   * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n   */\n  @Prop() ariaRole?: AriaRoleType;\n  @Watch('ariaRole')\n  validateAriaRole(newValue: MgForm['ariaRole']) {\n    if (newValue && !roles.includes(newValue)) {\n      throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if slotted mg-component's label are displayed on top\n   */\n  @Prop() labelOnTop = false;\n  @Watch('labelOnTop')\n  handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n    if (newValue) {\n      this.classCollection.add(this.classLabelOnTop);\n    } else {\n      this.classCollection.delete(this.classLabelOnTop);\n    }\n  }\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('requiredMessage')\n  handleAttributeChange(): void {\n    this.setMgInputs();\n    this.setRequiredMessage();\n  }\n\n  /**\n   * Define form valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define form invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessageText: string;\n\n  /**\n   * Emitted event on form validity check\n   * Tells if form is valid or not\n   */\n  @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n  /**\n   * Emitted event on form submit\n   */\n  @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError?.();\n      });\n      this.checkValidity();\n    }\n  }\n\n  /**\n   * Reset form inputs values, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      await Promise.all(\n        this.mgInputs.map(async input => {\n          if (input.reset !== undefined) {\n            await input.reset();\n          }\n        }),\n      );\n    }\n  }\n\n  /**\n   * Define required message based on mg-inputs required elements\n   */\n  private setRequiredMessage = (): void => {\n    // init required message\n    this.requiredMessageText = null;\n    this.classCollection.delete(this.classAllRequired);\n\n    if (this.requiredMessage === 'hide') return;\n    else if (this.requiredMessage === 'default') {\n      this.requiredMessageText = this.messages.form.required;\n      return;\n    }\n\n    // If the form is disabled or readonly none of them are required\n    // Check if all fields are not editable (readonly or disabled)\n    const isEditable = input => !(input.disabled || input.readonly);\n    const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n    if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n      // Get editable inputs\n      const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n      // Get required inputs\n      // mg-input-toggle can not be required\n      const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n      // All inputs are required\n      if (\n        [requiredInputs.length, editableInputs.length].every(length => length === 1) ||\n        (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n      ) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n        this.classCollection.add(this.classAllRequired);\n      }\n      // Some fields are required\n      else if (requiredInputs.length > 0) {\n        this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n      }\n    }\n  };\n\n  /**\n   * Returns a required message based on the count of required inputs.\n   * @param requiredInputs - An array of required input elements.\n   * @param keySingle - The key for the singular message format.\n   * @param keyPlural - The key for the plural message format.\n   * @returns The appropriate required message based on the count of required inputs.\n   */\n  private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n    this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n  /**\n   * Check if form is valid\n   */\n  private checkValidity = (): void => {\n    // Update required on input event\n    this.setRequiredMessage();\n\n    this.valid = !this.mgInputs.some(input => input.invalid);\n    this.invalid = !this.valid;\n    // We need to send valid event if it is the same value\n    this.formValid.emit(this.valid);\n  };\n\n  /**\n   * Handle Form Submit\n   * @param event - submit event\n   */\n  private handleFormSubmit = (event: SubmitEvent): void => {\n    event.preventDefault();\n    this.formSubmit.emit();\n  };\n\n  /**\n   * Set mgInputs\n   */\n  private setMgInputs = (): void => {\n    // Get slotted mgInputs\n    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT')) as (HTMLMgInputsElement & { disabled: boolean })[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.labelOnTop) {\n        input.labelOnTop = true;\n      }\n      if (this.readonly) {\n        input.readonly = true;\n      } else if (this.disabled) {\n        input.disabled = true;\n      } else {\n        input.addEventListener('input-valid', this.checkValidity);\n      }\n    });\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    this.watchIdentifier(this.identifier);\n    this.validateAriaRole(this.ariaRole);\n    this.validateRequiredMessage(this.requiredMessage);\n    this.handlelabelOnTop(this.labelOnTop);\n\n    // Get slotted mgButtons\n    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n    // Set button form identifier\n    this.mgButtons.forEach(mgButton => {\n      mgButton.setAttribute('form', this.identifier);\n    });\n\n    // Set mgInputs\n    this.setMgInputs();\n\n    // Check validity when slotted mgInputs are ready\n    Promise.all(\n      this.mgInputs.map(async input => {\n        try {\n          await input.componentOnReady();\n        } catch {} // prevent error with VueJS first render\n      }),\n    ).then(() => {\n      // Define required message and check validity\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    // Update mgInputs when mgForm content change\n    const observerOptions = { childList: true, subtree: true };\n    new MutationObserver(mutations => {\n      if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {\n        this.setMgInputs();\n        this.checkValidity();\n      }\n    }).observe(this.element, observerOptions);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n        {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -81,7 +81,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '2149de3930476c30fa95c8b117076751fff95029', class: this.classCollection.join() }, h("div", { key: '2795cb4895296c33b0aaf2ff8b2dcda464ce7f60', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'fd9f3c1fbcd10bf220d6dd527bf5a8485c505078', name: "illustration" })), h("div", { key: '1acf58c99a54bc100b98ca4bf37ef4fd32242a5f', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'a1945bb8898198066958f06082e27c6fe3c26153', name: "title" }), h("slot", { key: '97b69594078389495397985e8ccb1e5e0dd4bc3f', name: "details" }))));
+        return (h("div", { key: '60c53ef4294aa36a8c354b42f47f5c7d9fc409f6', class: this.classCollection.join() }, h("div", { key: '254673ae5b7183a1adfa53c18d9e632bcdd67607', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '16b9bbe8abaae4d0f7b713fbe345e54b5b966ac0', name: "illustration" })), h("div", { key: 'c272c168ea520f8c71261e8f84297fb1bd44c044', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '7ba11d5f5fe293175a01768619bc43b0632ba0a5', name: "title" }), h("slot", { key: 'f03540939af486bb44134298b12eaf9de32f814a', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-loader/mg-loader.js

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { initLocales } from "../../../locales";
 import { isValidString, toString } from "@mgdis/stencil-helpers";
 export class MgLoader {
+    constructor() {
+        /**
+         * Hide message
+         */
+        this.messageHide = false;
+    }
     watchMessage(newValue) {
         if (newValue && !isValidString(newValue))
             throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${toString(newValue)}.`);
@@ -23,7 +29,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b9442e1060b119499a8f35444be6b371d340dffc', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '9ef418d26dd97c570147c99948509368a8abe84b', icon: "loader", spin: true }), h("span", { key: '4cff50728afc076ffa202fa1b3973573d2a073e8', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: 'cd791f239c0ca655ed2470d606068dd361d9f019', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '450b1d79e33bb1f67a3e5243c3fb5f7855165848', icon: "loader", spin: true }), h("span", { key: 'e0f3e296fa631b1a2d44a7067b52dd0991cb43c6', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -67,7 +73,7 @@ export class MgLoader {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Hide message"
@@ -75,7 +81,8 @@ export class MgLoader {
                 "getter": false,
                 "setter": false,
                 "attribute": "message-hide",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/molecules/mg-loader/mg-loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-loader.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-loader/mg-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOjE,MAAM,OAAO,QAAQ;IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oEAAoE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACvJ,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,iBAAiB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ;YACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;YACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAQ,CAC/G,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-loader',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n  shadow: true,\n})\nexport class MgLoader {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgLoaderElement;\n\n  /**\n   * Override loader message\n   */\n  @Prop() message?: string;\n  @Watch('message')\n  watchMessage(newValue: MgLoader['message']): void {\n    if (newValue && !isValidString(newValue)) throw new Error(`<mg-loader> prop \"message\" must be a valid string. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Hide message\n   */\n  @Prop() messageHide?: boolean;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // validate props\n    this.watchMessage(this.message);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-loader\" aria-live=\"polite\">\n        <mg-icon icon=\"loader\" spin></mg-icon>\n        <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgress}</span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-loader.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-loader/mg-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOjE,MAAM,OAAO,QAAQ;IALrB;QA+BE;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;KA6B7B;IApCC,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oEAAoE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACvJ,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,iBAAiB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ;YACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;YACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAQ,CAC/G,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-loader',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n  shadow: true,\n})\nexport class MgLoader {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgLoaderElement;\n\n  /**\n   * Override loader message\n   */\n  @Prop() message?: string;\n  @Watch('message')\n  watchMessage(newValue: MgLoader['message']): void {\n    if (newValue && !isValidString(newValue)) throw new Error(`<mg-loader> prop \"message\" must be a valid string. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Hide message\n   */\n  @Prop() messageHide = false;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // validate props\n    this.watchMessage(this.message);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-loader\" aria-live=\"polite\">\n        <mg-icon icon=\"loader\" spin></mg-icon>\n        <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgress}</span>\n      </div>\n    );\n  }\n}\n"]}