@mgdis/mg-components 5.14.0 → 5.16.0

package/dist/mg-components/p-91f4a30d.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,H as s,g as e}from"./p-3bf1e2f0.js";import{i as o,D as n}from"./p-067080e4.js";var h;!function(t){t.BASE_INDEX="data-overflow-base-index",t.PROXY_INDEX="data-overflow-proxy-index"}(h||(h={}));class r{constructor(t,i){this.element=t,this.render=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.run=t=>{void 0===this._moreElement&&(this._moreElement=this.render(),this._baseChildren=this.getInteractiveItems(this.element),(()=>"MG-ITEM-MORE"===this._moreElement.nodeName)()&&(this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))),this._baseChildren.forEach(((t,i)=>{t.setAttribute(h.BASE_INDEX,`${i}`),this._proxyChildren[i].setAttribute(h.PROXY_INDEX,`${i}`)}))),void 0!==t&&this.updateDisplayedItems(t)},this.getInteractiveItems=t=>{var i;return((null===(i=t.children)||void 0===i?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))},this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=null!==i.previousItem&&null!==i.previousItem.getAttribute("hidden");this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e),i.previousItem=s}))},this.isOverflowElement=(t,i,s)=>null!==i.previousElementSibling&&!this.isMoreElement(i)&&(this.isMoreElement(i.nextElementSibling)?t>s:t+this._moreElement.offsetWidth>s),this.isMoreElement=t=>"MG-ITEM-MORE"===t.nodeName,this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(h.BASE_INDEX));this.isMoreElement(t)?this.toggleElement(this._moreElement,i):s>=0&&(this.toggleElement(t,i),this.toggleElement(this._proxyChildren[s],!i))},this.toggleElement=(t,i)=>{i?t.setAttribute("hidden",""):t.removeAttribute("hidden")},this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))},void 0===this._resizeObserver&&(this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))})),this._resizeObserver.observe(this.element)),this.run()}}const a=class{constructor(i){t(this,i),this.name="mg-item-more",this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(!0))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));return Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{const t=i[s].shadowRoot.querySelector("a, button");(t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement)&&t.click()})),""!==t.id.trim()&&(t.id=`${t.id}-proxy`),i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))})),this.element},this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1},this.size=void 0,this.parentMenu=void 0}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.moreLabel)}validateSize(t){if(t&&"string"!=typeof t)throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu,this.parentMenu=this.element.closest("mg-menu"),this.menuItems=Array.from(this.parentMenu.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new r(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"listitem"},i("mg-menu-item",{"data-overflow-more":!0,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:n.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};a.style=".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";export{a as mg_item_more}

package/dist/types/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.d.ts

@@ -0,0 +1,14 @@
+export declare class MgTooltipContent {
+  /**
+   * Displayed message in the tooltip
+   */
+  message: string;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -4,9 +4,10 @@ export declare class MgTooltip {
    * Internal *
    ************/
   private popper;
-  private tooltip;
+  private mgTooltipContent;
   private tooltipedElement;
   private windows;
+  private hasCustomTabIndex;
   private guard;
   /**************
    * Decorators *
@@ -38,6 +39,7 @@ export declare class MgTooltip {
    * Disable tooltip
    */
   disabled: boolean;
+  validateDisabled(newValue: MgTooltip['disabled']): void;
   /**
    * Show tooltip
    */
@@ -84,6 +86,10 @@ export declare class MgTooltip {
    * @param interactiveElement - interactive element
    */
   private initTooltip;
+  /**
+   * Render tooltip content element
+   */
+  private renderTooltip;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts

@@ -24,6 +24,25 @@ export declare class MgInputNumeric {
    */
   value: string;
   validateValue(newValue: MgInputNumeric['value']): void;
+  /**
+   * Checks if the given value is valid according to the defined rules.
+   * @param value - The input value to validate.
+   * @param regex - The regular expression for validation.
+   * @param integer - The integer part of the value.
+   * @param decimal - The decimal part of the value.
+   * @returns Returns true if the value is valid, otherwise false.
+   */
+  private isValidValue;
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  private handleInvalidValue;
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  private updateValues;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */

package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts

@@ -38,12 +38,17 @@ export declare class MgActionMore {
    */
   expanded: boolean;
   /************
-   * Merthods *
+   * Methods *
    ***********/
   /**
    * Toogle expanded props
    */
   private toggleExpanded;
+  /**
+   * Handle popover display change value
+   * @param event - display change updated value
+   */
+  private handleDisplayChange;
   /**
    * Button click handler
    */

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -68,6 +68,14 @@ export declare class MgForm {
    * Define required message based on mg-inputs required elements
    */
   private setRequiredMessage;
+  /**
+   * Returns a required message based on the count of required inputs.
+   * @param requiredInputs - An array of required input elements.
+   * @param keySingle - The key for the singular message format.
+   * @param keyPlural - The key for the plural message format.
+   * @returns The appropriate required message based on the count of required inputs.
+   */
+  private getRequiredMessageBasedOnCount;
   /**
    * Check if form is valid
    */

package/dist/types/components/molecules/mg-modal/mg-modal.conf.d.ts

@@ -0,0 +1,8 @@
+/**
+ * List of all possibles dialog roles
+ */
+export declare const dialogRoles: readonly ["dialog", "alertdialog"];
+/**
+ * DialogRole type from dialog roles
+ */
+export type DialogRoleType = (typeof dialogRoles)[number];

package/dist/types/components/molecules/mg-modal/mg-modal.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
+import { DialogRoleType } from './mg-modal.conf';
 export declare class MgModal {
   /************
    * Internal *
@@ -22,11 +23,16 @@ export declare class MgModal {
    * If not set, it will be created.
    */
   identifier: string;
+  /**
+   * Modal dialog role.
+   */
+  dialogRole: DialogRoleType;
+  validateDialogRole(newValue: MgModal['dialogRole']): void;
   /**
    * Displayed modal title
    */
   modalTitle: string;
-  validateModalTitle(newValue: string): void;
+  validateModalTitle(newValue: MgModal['modalTitle']): void;
   /**
    * Define if modal has a cross button
    */
@@ -35,7 +41,7 @@ export declare class MgModal {
    * Define if modal is hidden
    */
   hide: boolean;
-  validateHide(newValue: boolean): void;
+  validateHide(newValue: MgModal['hide']): void;
   /**
    * Define if component is using actions slot
    */

package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '../../../../utils/components.utils';
+export declare class MgPopoverContent {
+  /************
+   * Internal *
+   ************/
+  private messages;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgPopoverContentElement;
+  /**
+   * Define if popover has a cross button
+   */
+  closeButton: boolean;
+  /**
+   * Component classes
+   */
+  classCollection: ClassList;
+  /**
+   * Emited event when close button is clicked
+   */
+  hideContent: EventEmitter<string>;
+  /**
+   * Handle action for close button
+   */
+  private handleCloseButton;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are valide
+   */
+  componentWillLoad(): void;
+  /**
+   * Check if component slots are valide
+   */
+  componentDidLoad(): void;
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-popover/mg-popover.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
 import { Placement } from '@popperjs/core';
 export declare class MgPopover {
   /************
@@ -7,11 +6,8 @@ export declare class MgPopover {
    ************/
   private popper;
   private mgPopover;
-  private closeButtonId;
+  private mgPopoverContent;
   private windows;
-  private resizeObserver;
-  private messages;
-  private readonly classArrowHide;
   /**************
    * Decorators *
    **************/
@@ -37,6 +33,7 @@ export declare class MgPopover {
    * Define if popover has a cross button
    */
   closeButton: boolean;
+  validateCloseButton(newValue: MgPopover['arrowHide']): void;
   /**
    * Display popover
    */
@@ -46,10 +43,6 @@ export declare class MgPopover {
    * Disable popover
    */
   disabled: boolean;
-  /**
-   * Component classes
-   */
-  classCollection: ClassList;
   /**
    * Emited event when display value change
    */
@@ -68,9 +61,13 @@ export declare class MgPopover {
    */
   private hide;
   /**
-   * Handle action for close button
+   * Handle content hide event
+   */
+  private handleHideContent;
+  /**
+   * Render popover content element
    */
-  private handleCloseButton;
+  private renderPopoverContent;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components.d.ts

@@ -19,6 +19,7 @@ import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-ite
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 import { Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
+import { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
 import { Placement } from "@popperjs/core";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
@@ -1003,6 +1004,10 @@ export namespace Components {
           * Define if modal has a cross button
          */
         "closeButton": boolean;
+        /**
+          * Modal dialog role.
+         */
+        "dialogRole": DialogRoleType;
         /**
           * Define if modal is hidden
          */
@@ -1106,6 +1111,12 @@ export namespace Components {
          */
         "placement": Placement;
     }
+    interface MgPopoverContent {
+        /**
+          * Define if popover has a cross button
+         */
+        "closeButton": boolean;
+    }
     interface MgSkipLinks {
         /**
           * Skip links
@@ -1170,6 +1181,12 @@ export namespace Components {
          */
         "placement": Placement;
     }
+    interface MgTooltipContent {
+        /**
+          * Displayed message in the tooltip
+         */
+        "message": string;
+    }
 }
 export interface MgButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1247,6 +1264,10 @@ export interface MgPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgPopoverElement;
 }
+export interface MgPopoverContentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgPopoverContentElement;
+}
 export interface MgSkipLinksCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgSkipLinksElement;
@@ -1433,6 +1454,12 @@ declare global {
         prototype: HTMLMgPopoverElement;
         new (): HTMLMgPopoverElement;
     };
+    interface HTMLMgPopoverContentElement extends Components.MgPopoverContent, HTMLStencilElement {
+    }
+    var HTMLMgPopoverContentElement: {
+        prototype: HTMLMgPopoverContentElement;
+        new (): HTMLMgPopoverContentElement;
+    };
     interface HTMLMgSkipLinksElement extends Components.MgSkipLinks, HTMLStencilElement {
     }
     var HTMLMgSkipLinksElement: {
@@ -1457,6 +1484,12 @@ declare global {
         prototype: HTMLMgTooltipElement;
         new (): HTMLMgTooltipElement;
     };
+    interface HTMLMgTooltipContentElement extends Components.MgTooltipContent, HTMLStencilElement {
+    }
+    var HTMLMgTooltipContentElement: {
+        prototype: HTMLMgTooltipContentElement;
+        new (): HTMLMgTooltipContentElement;
+    };
     interface HTMLElementTagNameMap {
         "mg-action-more": HTMLMgActionMoreElement;
         "mg-badge": HTMLMgBadgeElement;
@@ -1487,10 +1520,12 @@ declare global {
         "mg-pagination": HTMLMgPaginationElement;
         "mg-panel": HTMLMgPanelElement;
         "mg-popover": HTMLMgPopoverElement;
+        "mg-popover-content": HTMLMgPopoverContentElement;
         "mg-skip-links": HTMLMgSkipLinksElement;
         "mg-tabs": HTMLMgTabsElement;
         "mg-tag": HTMLMgTagElement;
         "mg-tooltip": HTMLMgTooltipElement;
+        "mg-tooltip-content": HTMLMgTooltipContentElement;
     }
 }
 declare namespace LocalJSX {
@@ -2540,6 +2575,10 @@ declare namespace LocalJSX {
           * Define if modal has a cross button
          */
         "closeButton"?: boolean;
+        /**
+          * Modal dialog role.
+         */
+        "dialogRole"?: DialogRoleType;
         /**
           * Define if modal is hidden
          */
@@ -2667,6 +2706,16 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface MgPopoverContent {
+        /**
+          * Define if popover has a cross button
+         */
+        "closeButton"?: boolean;
+        /**
+          * Emited event when close button is clicked
+         */
+        "onHide-content"?: (event: MgPopoverContentCustomEvent<string>) => void;
+    }
     interface MgSkipLinks {
         /**
           * Skip links
@@ -2739,6 +2788,12 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface MgTooltipContent {
+        /**
+          * Displayed message in the tooltip
+         */
+        "message": string;
+    }
     interface IntrinsicElements {
         "mg-action-more": MgActionMore;
         "mg-badge": MgBadge;
@@ -2769,10 +2824,12 @@ declare namespace LocalJSX {
         "mg-pagination": MgPagination;
         "mg-panel": MgPanel;
         "mg-popover": MgPopover;
+        "mg-popover-content": MgPopoverContent;
         "mg-skip-links": MgSkipLinks;
         "mg-tabs": MgTabs;
         "mg-tag": MgTag;
         "mg-tooltip": MgTooltip;
+        "mg-tooltip-content": MgTooltipContent;
     }
 }
 export { LocalJSX as JSX };
@@ -2811,10 +2868,12 @@ declare module "@stencil/core" {
             "mg-pagination": LocalJSX.MgPagination & JSXBase.HTMLAttributes<HTMLMgPaginationElement>;
             "mg-panel": LocalJSX.MgPanel & JSXBase.HTMLAttributes<HTMLMgPanelElement>;
             "mg-popover": LocalJSX.MgPopover & JSXBase.HTMLAttributes<HTMLMgPopoverElement>;
+            "mg-popover-content": LocalJSX.MgPopoverContent & JSXBase.HTMLAttributes<HTMLMgPopoverContentElement>;
             "mg-skip-links": LocalJSX.MgSkipLinks & JSXBase.HTMLAttributes<HTMLMgSkipLinksElement>;
             "mg-tabs": LocalJSX.MgTabs & JSXBase.HTMLAttributes<HTMLMgTabsElement>;
             "mg-tag": LocalJSX.MgTag & JSXBase.HTMLAttributes<HTMLMgTagElement>;
             "mg-tooltip": LocalJSX.MgTooltip & JSXBase.HTMLAttributes<HTMLMgTooltipElement>;
+            "mg-tooltip-content": LocalJSX.MgTooltipContent & JSXBase.HTMLAttributes<HTMLMgTooltipContentElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.14.0",
+  "version": "5.16.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -26,7 +26,7 @@
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^2.22.1",
     "normalize.css": "^8.0.1",
-    "@mgdis/img": "1.0.0"
+    "@mgdis/img": "1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -35,27 +35,27 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@playwright/test": "^1.34.3",
+    "@playwright/test": "^1.x",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^7.0.23",
-    "@storybook/addon-actions": "^7.0.23",
-    "@storybook/addon-essentials": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/addon-mdx-gfm": "^7.0.23",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/html": "^7.0.23",
-    "@storybook/html-webpack5": "^7.0.23",
+    "@storybook/addon-a11y": "^7.2.0",
+    "@storybook/addon-actions": "^7.2.0",
+    "@storybook/addon-essentials": "^7.2.0",
+    "@storybook/addon-links": "^7.2.0",
+    "@storybook/addon-mdx-gfm": "^7.2.0",
+    "@storybook/blocks": "^7.2.0",
+    "@storybook/html": "^7.2.0",
+    "@storybook/html-webpack5": "^7.2.0",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "npm:@types/jest@^26",
     "@types/jest-image-snapshot": "^4.3.2",
-    "@types/node": "^18.14.0",
+    "@types/node": "^18.15.10",
     "babel-loader": "^8.3.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
-    "eslint": "^8.45.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint": "^8.x",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
@@ -70,14 +70,14 @@
     "react-textarea-autosize": "^8.5.0",
     "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
-    "storybook": "^7.0.23",
+    "storybook": "^7.2.0",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "@mgdis/linting-stencil": "1.1.0",
     "eslint-config-stencil": "1.1.1",
     "playwright-config": "1.0.0",
-    "tsconfig": "1.0.0"
+    "tsconfig": "1.0.0",
+    "@mgdis/linting-stencil": "1.1.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
@@ -92,7 +92,7 @@
     "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
-    "test:e2e": "stencil test --e2e",
+    "test:e2e": "pnpm prebuild && stencil test --e2e --collectCoverage --collectCoverageFrom=\"src/**/*.e2e.ts\" --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e:playwright": "pnpm --package=@pnpm/@playwright/test dlx playwright test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",

package/dist/mg-components/p-4ae1130f.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,H as s,g as e}from"./p-3bf1e2f0.js";import{i as o,D as h}from"./p-067080e4.js";var n;!function(t){t.BASE_INDEX="data-overflow-base-index",t.PROXY_INDEX="data-overflow-proxy-index"}(n||(n={}));class r{constructor(t,i){this.element=t,this.render=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.run=t=>{void 0===this._moreElement&&(this._moreElement=this.render(),this._baseChildren=this.getInteractiveItems(this.element),(()=>"MG-ITEM-MORE"===this._moreElement.nodeName)()&&(this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))),this._baseChildren.forEach(((t,i)=>{t.setAttribute(n.BASE_INDEX,`${i}`),this._proxyChildren[i].setAttribute(n.PROXY_INDEX,`${i}`)}))),void 0!==t&&this.updateDisplayedItems(t)},this.getInteractiveItems=t=>{var i;return((null===(i=t.children)||void 0===i?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))},this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=null!==i.previousItem&&null!==i.previousItem.getAttribute("hidden");this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e),i.previousItem=s}))},this.isOverflowElement=(t,i,s)=>null!==i.previousElementSibling&&!this.isMoreElement(i)&&(this.isMoreElement(i.nextElementSibling)?t>s:t+this._moreElement.offsetWidth>s),this.isMoreElement=t=>"MG-ITEM-MORE"===t.nodeName,this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(n.BASE_INDEX));this.isMoreElement(t)?this.toggleElement(this._moreElement,i):s>=0&&(this.toggleElement(t,i),this.toggleElement(this._proxyChildren[s],!i))},this.toggleElement=(t,i)=>{i?t.setAttribute("hidden",""):t.removeAttribute("hidden")},this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))},void 0===this._resizeObserver&&(this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))})),this._resizeObserver.observe(this.element)),this.run()}}const a=class{constructor(i){t(this,i),this.name="mg-item-more",this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(!0))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));return Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{i[s].shadowRoot.querySelector("a, button").click()})),""!==t.id.trim()&&(t.id=`${t.id}-proxy`),i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))})),this.element},this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1},this.size=void 0,this.parentMenu=void 0}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.moreLabel)}validateSize(t){if(t&&"string"!=typeof t)throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu,this.parentMenu=this.element.closest("mg-menu"),this.menuItems=Array.from(this.parentMenu.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new r(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"menuitem","aria-haspopup":"true"},i("mg-menu-item",{"data-overflow-more":!0,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};a.style=".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";export{a as mg_item_more}