@mgdis/mg-components 5.8.0 → 5.8.2

package/dist/mg-components/{p-1221773c.entry.js → p-67ce7cb8.entry.js}

@@ -1 +1 @@
-import{r as t,h as i,H as s,g as e}from"./p-e126dd84.js";import{i as o,D as h}from"./p-367f92d2.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")||i[s].shadowRoot.querySelector("button")).dispatchEvent(new MouseEvent("click",{bubbles:!0}))})),""!==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}
+import{r as t,h as i,H as s,g as e}from"./p-8fbc0d87.js";import{i as o,D as h}from"./p-367f92d2.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}

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

@@ -21,7 +21,7 @@ export declare class MgInputCheckbox {
    * Required
    */
   value: CheckboxValue[];
-  validateValue(newValue: CheckboxValue[]): void;
+  validateValue(newValue: MgInputCheckbox['value']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -91,11 +91,11 @@ export declare class MgInputCheckbox {
   /**
    * Emitted event when value change
    */
-  valueChange: EventEmitter<CheckboxValue[]>;
+  valueChange: EventEmitter<MgInputCheckbox['value']>;
   /**
    * Emited event when checking validity
    */
-  inputValid: EventEmitter<boolean>;
+  inputValid: EventEmitter<MgInputCheckbox['valid']>;
   /**
    * Public method to display errors
    *

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

@@ -20,12 +20,12 @@ export declare class MgInputSelect {
    * Component value
    */
   value: any;
-  handleValue(newValue: any): void;
+  validateValue(newValue: MgInputSelect['value']): void;
   /**
    * Items are the possible options to select
    */
-  items: string[] | SelectOption[];
-  validateItems(newValue: string[] | SelectOption[]): void;
+  items: (string | SelectOption)[];
+  validateItems(newValue: MgInputSelect['items']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -116,7 +116,7 @@ export declare class MgInputSelect {
   /**
    * Emited event when value change
    */
-  valueChange: EventEmitter<any>;
+  valueChange: EventEmitter<MgInputSelect['value']>;
   /**
    * Emited event when checking validity
    */
@@ -129,12 +129,40 @@ export declare class MgInputSelect {
   displayError(): Promise<void>;
   /**
    * Handle input event
+   *
+   * @returns {void}
    */
   private handleInput;
+  /**
+   * Method to compare item.title with input.value
+   *
+   * @param {SelectOption} item item to compare with
+   * @returns {boolean} truthy if input.value is an item
+   */
+  private isInputValue;
+  /**
+   * value props setter
+   *
+   * @param {MgInputSelect['value']} newValue value to update with
+   * @returns {void}
+   */
+  private setValue;
+  /**
+   * Update value from input.value
+   *
+   * @returns {void}
+   */
+  private updateValue;
   /**
    * Handle blur event
    */
   private handleBlur;
+  /**
+   * Input value is disabled
+   *
+   * @returns {boolean} truthy if input value is disabled
+   */
+  private isDisabledValue;
   /**
    * Check if input is valid
    */
@@ -152,6 +180,13 @@ export declare class MgInputSelect {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render option
+   *
+   * @param {SelectOption} option to render
+   * @returns {HTMLElement} render option
+   */
+  private renderOption;
   /**
    * Render
    *

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

@@ -29,8 +29,8 @@ export declare class MgMenu {
    * Customize "mg-item-more" element
    * Used with direction: 'vertical' to manage overflow
    */
-  itemMore: ItemMoreType;
-  validateItemMore(newValue: MgMenu['itemMore']): void;
+  itemmore: ItemMoreType;
+  validateItemMore(newValue: MgMenu['itemmore']): void;
   /**
    * Define mg-menu size
    * Default: 'regular'
@@ -41,6 +41,9 @@ export declare class MgMenu {
    * is this menu a child menu. Used for conditional render.
    */
   isChildMenu: boolean;
+  /*************
+   * Methods *
+   *************/
   /**
    * Close matching menu-item
    *
@@ -49,15 +52,38 @@ export declare class MgMenu {
    * @returns {void}
    */
   private closeMenuItem;
-  /*************
-   * Methods *
-   *************/
+  /**
+   * get mg-item-more element
+   *
+   * @returns {HTMLMgItemMoreElement} mg-item-more element
+   */
+  private getItemMore;
+  /**
+   * get mg-item-more >>> mg-menu-item element
+   *
+   * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+   */
+  private getItemMoreMenuItem;
+  /**
+   * Set item listend
+   *
+   * @param {HTMLMgMenuItemElement} item mg-menu-item element
+   * @param {MgMenu['focusedMenuItem']} index number
+   * @returns {void}
+   */
+  private setItemListener;
   /**
    * Store menu-items on component init and add listeners
    *
    * @returns {void}
    */
   private initMenuItemsListeners;
+  /**
+   * Handle item-loaded event on mg-item-more element
+   *
+   * @returns {void}
+   */
+  private handleItemLoaded;
   /**
    * render mg-item-more
    *

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -47,6 +47,10 @@ export declare class MgMenuItem {
    * Emited event when status change
    */
   statusChange: EventEmitter<MgMenuItem['status']>;
+  /**
+   * Emited event when item is loaded
+   */
+  itemLoaded: EventEmitter<void>;
   /**********
    * States *
    *********/

package/dist/types/components.d.ts

@@ -575,7 +575,7 @@ export namespace Components {
         /**
           * Items are the possible options to select
          */
-        "items": string[] | SelectOption[];
+        "items": (string | SelectOption)[];
         /**
           * Input label
          */
@@ -907,7 +907,7 @@ export namespace Components {
         /**
           * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "itemMore": ItemMoreType;
+        "itemmore": ItemMoreType;
         /**
           * Menu label. Include short menu description. Required for accessibility
          */
@@ -1651,11 +1651,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: MgInputCheckboxCustomEvent<boolean>) => void;
+        "onInput-valid"?: (event: MgInputCheckboxCustomEvent<MgInputCheckbox['valid']>) => void;
         /**
           * Emitted event when value change
          */
-        "onValue-change"?: (event: MgInputCheckboxCustomEvent<CheckboxValue[]>) => void;
+        "onValue-change"?: (event: MgInputCheckboxCustomEvent<MgInputCheckbox['value']>) => void;
         /**
           * Define if input is readonly
          */
@@ -2001,7 +2001,7 @@ declare namespace LocalJSX {
         /**
           * Items are the possible options to select
          */
-        "items": string[] | SelectOption[];
+        "items": (string | SelectOption)[];
         /**
           * Input label
          */
@@ -2029,7 +2029,7 @@ declare namespace LocalJSX {
         /**
           * Emited event when value change
          */
-        "onValue-change"?: (event: MgInputSelectCustomEvent<any>) => void;
+        "onValue-change"?: (event: MgInputSelectCustomEvent<MgInputSelect['value']>) => void;
         /**
           * Input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
          */
@@ -2350,7 +2350,7 @@ declare namespace LocalJSX {
         /**
           * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "itemMore"?: ItemMoreType;
+        "itemmore"?: ItemMoreType;
         /**
           * Menu label. Include short menu description. Required for accessibility
          */
@@ -2373,6 +2373,10 @@ declare namespace LocalJSX {
           * Identifier is used to control mg-popover Default: createID('mg-menu-item');
          */
         "identifier"?: string;
+        /**
+          * Emited event when item is loaded
+         */
+        "onItem-loaded"?: (event: MgMenuItemCustomEvent<void>) => void;
         /**
           * Emited event when status change
          */

package/dist/types/utils/components.utils.d.ts

@@ -44,10 +44,10 @@ export declare class ClassList {
 /**
  * Check if all items are string
  *
- * @param {string[]} items items to check
+ * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
-export declare const allItemsAreString: (items: string[]) => boolean;
+export declare const allItemsAreString: (items: unknown) => items is string[];
 /**
  * Check if element is a heading
  *

package/dist/types/utils/unit.test.utils.d.ts

@@ -1,3 +1,4 @@
+import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
  *
@@ -67,6 +68,16 @@ type setupResizeObserverMockParams = {
   observe: ResizeObserver['observe'];
 };
 export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
+/**
+ * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
+ *
+ * @returns {void}
+ * @example
+ * ```
+ * setupSubmitEventMock();
+ * ```
+ */
+export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
 /**
  * force popover id when component use randomed identifier
  *

package/package.json

@@ -1,12 +1,7 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "description": "MG Components",
-  "packageManager": "pnpm@7.17.1",
-  "engineStrict": true,
-  "engines": {
-    "pnpm": ">=7"
-  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
@@ -59,21 +54,20 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.10",
-    "husky": "^7.0.4",
-    "jest": "^26.6.3",
+    "jest": "^27.0.3",
     "jest-cli": "^26.6.3",
     "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^13.2.0",
+    "jest-junit": "^14.0.1",
     "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "turbo": "^1.8.1",
-    "typescript": "~4.4.4"
+    "typescript": "^4.9.5"
   },
   "license": "BSD-3-Clause",
   "scripts": {
@@ -86,11 +80,12 @@
     "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
     "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 --reporters=\"default\" --reporters=\"jest-junit\"",
+    "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "stencil test --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
-    "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook"
+    "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
+    "coverage": "TZ=UTC stencil test --spec --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\""
   }
 }