@mgdis/mg-components 4.2.0 → 5.0.0

package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts

@@ -10,6 +10,10 @@ export declare class MgIllustratedMessage {
    * Define illustration size
    */
   size: 'regular' | 'small';
+  /**
+   * Define component orientation
+   */
+  direction: 'vertical' | 'horizontal';
   /*************
    * Lifecycle *
    *************/

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

@@ -8,6 +8,7 @@ export declare class MgModal {
   private closeButtonId;
   private titleId;
   private messages;
+  private bodyOverflow;
   /**************
    * Decorators *
    **************/

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

@@ -56,6 +56,7 @@ export declare class MgPagination {
    * Go to 'previous/next' page button handler
    *
    * @param {string} action navigation action
+   * @param {boolean} disabled button disable state
    * @returns {void}
    */
   private handleGoToPage;

package/dist/types/components.d.ts

@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BadgeType } from "./components/atoms/mg-badge/mg-badge.conf";
-import { ButtonType } from "./components/atoms/mg-button/mg-button.conf";
+import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 import { CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
@@ -35,10 +35,6 @@ export namespace Components {
         "variant": string;
     }
     interface MgButton {
-        /**
-          * Prop to set aria-controls on button element
-         */
-        "controls": string;
         /**
           * Option to set input disable on click, in order to prevent multi-click. Parent component have to remove the attribute 'disabled' when the process ends.
          */
@@ -47,18 +43,10 @@ export namespace Components {
           * Disable button
          */
         "disabled": boolean;
-        /**
-          * Prop to set aria-expanded on button element
-         */
-        "expanded": boolean;
         /**
           * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
          */
         "form": string;
-        /**
-          * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
-         */
-        "haspopup": boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
@@ -72,13 +60,13 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+          * Define button type
          */
         "type": ButtonType;
         /**
           * Define button variant
          */
-        "variant": string;
+        "variant": VariantType;
     }
     interface MgCharacterLeft {
         /**
@@ -158,6 +146,10 @@ export namespace Components {
         "variant": string;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define component orientation
+         */
+        "direction": 'vertical' | 'horizontal';
         /**
           * Define illustration size
          */
@@ -1285,10 +1277,6 @@ declare namespace LocalJSX {
         "variant"?: string;
     }
     interface MgButton {
-        /**
-          * Prop to set aria-controls on button element
-         */
-        "controls"?: string;
         /**
           * Option to set input disable on click, in order to prevent multi-click. Parent component have to remove the attribute 'disabled' when the process ends.
          */
@@ -1297,18 +1285,10 @@ declare namespace LocalJSX {
           * Disable button
          */
         "disabled"?: boolean;
-        /**
-          * Prop to set aria-expanded on button element
-         */
-        "expanded"?: boolean;
         /**
           * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
          */
         "form"?: string;
-        /**
-          * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
-         */
-        "haspopup"?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
@@ -1322,13 +1302,13 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+          * Define button type
          */
         "type"?: ButtonType;
         /**
           * Define button variant
          */
-        "variant"?: string;
+        "variant"?: VariantType;
     }
     interface MgCharacterLeft {
         /**
@@ -1415,6 +1395,10 @@ declare namespace LocalJSX {
         "variant"?: string;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define component orientation
+         */
+        "direction"?: 'vertical' | 'horizontal';
         /**
           * Define illustration size
          */

package/dist/types/stencil-public-runtime.d.ts

@@ -221,7 +221,8 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +235,8 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,18 +249,22 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
@@ -272,6 +279,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +288,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -64,7 +64,7 @@
     "@typescript-eslint/parser": "^4.33.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.7.1",
+    "chromatic": "^6.10.1",
     "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
     "eslint-plugin-jsdoc": "^38.0.6",

package/dist/cjs/mg-popover.cjs.entry.js

@@ -1,171 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-64cee0c8.js');
-const index$1 = require('./index-179621c8.js');
-const popper = require('./popper-71bf3058.js');
-
-const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>[slot=title],.mg-popover__title .sc-mg-popover-s>[slot=title]{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
-
-const MgPopover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.displayChange = index.createEvent(this, "display-change", 7);
-    this.closeButtonId = '';
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = index$1.createID('mg-popover');
-    /**
-     * Popover placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Define if popover has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Display popover
-     */
-    this.display = false;
-    /**
-     * Disable popover
-     */
-    this.disabled = false;
-    /**
-     * Check if clicked outside of component
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
-     */
-    this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
-        this.display = false;
-      }
-    };
-    /**
-     * Show popover
-     *
-     * @returns {void}
-     */
-    this.show = () => {
-      // Make the popover visible
-      this.popover.setAttribute('data-show', '');
-      // Enable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // Update its position
-      this.popper.update();
-      // hide when click outside
-      // setTimeout is used to prevent event to trigger after creation
-      setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
-      }, 0);
-    };
-    /**
-     * Hide popover
-     *
-     * @returns {void}
-     */
-    this.hide = () => {
-      // Hide the popover
-      this.popover.removeAttribute('data-show');
-      // Disable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
-    };
-    /**
-     * Handle action for close button
-     *
-     * @returns {void}
-     */
-    this.handleCloseButton = () => {
-      this.display = false;
-    };
-  }
-  handleDisplay(newValue) {
-    if (newValue) {
-      this.show();
-    }
-    else {
-      this.hide();
-    }
-    this.displayChange.emit(newValue);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
-  }
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void}
-   */
-  componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement && !index$1.isTagName(slotedTitleElement, headingTags)) {
-      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
-    // Get popover content
-    this.popover = this.element.querySelector(`#${this.identifier}`);
-    //Get interactive element
-    const interactiveElement = this.element.firstElementChild;
-    // Add aria attributes
-    interactiveElement.setAttribute('aria-controls', this.identifier);
-    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-    // Create popperjs popover
-    this.popper = popper.createPopper(interactiveElement, this.popover, {
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 10],
-          },
-        },
-      ],
-    });
-    // Add events to toggle display
-    interactiveElement.addEventListener('click', () => {
-      if (!this.disabled)
-        this.display = !this.display;
-    });
-    // Add events to hide popover
-    this.element.addEventListener('keydown', e => {
-      if (!this.disabled && e.code === 'Escape')
-        this.display = false;
-    });
-    this.handleDisplay(this.display);
-  }
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" }), index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-};
-MgPopover.style = mgPopoverCss;
-
-exports.mg_popover = MgPopover;