@mgdis/mg-components 5.19.3 → 5.20.0

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

@@ -2,346 +2,353 @@ import { Host, h } from "@stencil/core";
 import { createID, getWindows } from "../../../utils/components.utils";
 import { createPopper } from "@popperjs/core";
 export class MgPopover {
-  constructor() {
-    /**
-     * Check if clicked outside of component
-     * @param event - mouse event
-     */
-    this.clickOutside = (event) => {
-      const closestElement = event.target.closest(`[data-mg-popover-guard]`);
-      if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
+    constructor() {
+        /**
+         * Check if clicked outside of component
+         * @param event - mouse event
+         */
+        this.clickOutside = (event) => {
+            const closestElement = event.target.closest(`[data-mg-popover-guard]`);
+            if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
+                this.display = false;
+            }
+        };
+        /**
+         * Show popover
+         */
+        this.show = () => {
+            // Make the popover visible
+            this.mgPopover.dataset.show = '';
+            // Enable the event listeners
+            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+            // hide when click outside
+            // setTimeout is used to prevent event to trigger after creation
+            setTimeout(() => {
+                this.windows.forEach((localWindow) => {
+                    localWindow.addEventListener('click', this.clickOutside, false);
+                });
+            });
+        };
+        /**
+         * Hide popover
+         */
+        this.hide = () => {
+            // Hide the popover
+            this.mgPopover.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
+            this.windows.forEach((localWindow) => {
+                localWindow.removeEventListener('click', this.clickOutside, false);
+            });
+        };
+        /**
+         * Handle content hide event
+         */
+        this.handleHideContent = () => {
+            this.display = false;
+        };
+        /**
+         * Render popover content element
+         */
+        this.renderPopoverContent = () => {
+            const mgPopoverContent = this.element.querySelector('mg-popover-content');
+            if (mgPopoverContent === null) {
+                this.mgPopoverContent = document.createElement('mg-popover-content');
+                this.mgPopoverContent.setAttribute('slot', 'content');
+                this.mgPopoverContent.setAttribute('id', this.identifier);
+                this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+                const arrow = document.createElement('div');
+                arrow.setAttribute('slot', 'arrow');
+                arrow.dataset.popperArrow = '';
+                this.mgPopoverContent.appendChild(arrow);
+                // insert elements in DOM
+                ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+                    Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+                        this.mgPopoverContent.appendChild(slot);
+                    });
+                });
+                this.element.appendChild(this.mgPopoverContent);
+            }
+            else {
+                mgPopoverContent.setAttribute('id', this.identifier);
+            }
+        };
+        this.identifier = createID('mg-popover');
+        this.placement = 'bottom';
+        this.arrowHide = false;
+        this.closeButton = false;
         this.display = false;
-      }
-    };
+        this.disabled = false;
+    }
+    validateIdentifier() {
+        // use renderPopoverContent to update popover-content id
+        this.renderPopoverContent();
+    }
+    validateArrowHide(newValue) {
+        if (newValue)
+            this.mgPopoverContent.dataset.arrowHide = '';
+        else
+            delete this.mgPopoverContent.dataset.arrowHide;
+    }
+    validateCloseButton(newValue) {
+        this.mgPopoverContent.closeButton = newValue;
+    }
+    handleDisplay(newValue) {
+        if (newValue) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+        this.displayChange.emit(newValue);
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Show popover
+     * update popper position after props change on component did update hook to benefit from render ended
      */
-    this.show = () => {
-      // Make the popover visible
-      this.mgPopover.dataset.show = '';
-      // Enable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // hide when click outside
-      // setTimeout is used to prevent event to trigger after creation
-      setTimeout(() => {
-        this.windows.forEach((localWindow) => {
-          localWindow.addEventListener('click', this.clickOutside, false);
-        });
-      }, 0);
-    };
+    componentDidUpdate() {
+        this.popper.update();
+    }
     /**
-     * Hide popover
+     * Check if component props are well configured on init
      */
-    this.hide = () => {
-      // Hide the popover
-      this.mgPopover.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
-      this.windows.forEach((localWindow) => {
-        localWindow.removeEventListener('click', this.clickOutside, false);
-      });
-    };
+    componentWillLoad() {
+        // Get windows to attach events
+        this.windows = getWindows(window);
+        // render mg-popover-content slot
+        this.renderPopoverContent();
+        this.validateCloseButton(this.closeButton);
+        this.validateIdentifier();
+        this.validateArrowHide(this.arrowHide);
+    }
     /**
-     * Handle content hide event
+     * Check if component props are well configured on init
      */
-    this.handleHideContent = () => {
-      this.display = false;
-    };
+    componentDidLoad() {
+        // Get popover content
+        this.mgPopover = this.element.querySelector(`#${this.identifier}`);
+        //Get interactive element (first element without slot attribute)
+        const interactiveElement = this.element.querySelector(':not([slot])');
+        // Add aria attributes
+        interactiveElement.setAttribute('aria-controls', this.identifier);
+        interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+        // Create popperjs popover
+        this.popper = createPopper(interactiveElement, this.mgPopover, {
+            placement: this.placement,
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 0],
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: ['auto'],
+                    },
+                },
+            ],
+        });
+        // add resize observer
+        [interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
+            new ResizeObserver(() => {
+                this.popper.update();
+            }).observe(element);
+        });
+        // 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;
+                interactiveElement.focus();
+            }
+        });
+        this.handleDisplay(this.display);
+    }
     /**
-     * Render popover content element
+     * Render
+     * @returns HTML Element
      */
-    this.renderPopoverContent = () => {
-      const mgPopoverContent = this.element.querySelector('mg-popover-content');
-      if (mgPopoverContent === null) {
-        this.mgPopoverContent = document.createElement('mg-popover-content');
-        this.mgPopoverContent.setAttribute('slot', 'content');
-        this.mgPopoverContent.setAttribute('id', this.identifier);
-        this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
-        const arrow = document.createElement('div');
-        arrow.setAttribute('slot', 'arrow');
-        arrow.dataset.popperArrow = '';
-        this.mgPopoverContent.appendChild(arrow);
-        // insert elements in DOM
-        ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
-          Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
-            this.mgPopoverContent.appendChild(slot);
-          });
-        });
-        this.element.appendChild(this.mgPopoverContent);
-      }
-      else {
-        mgPopoverContent.setAttribute('id', this.identifier);
-      }
-    };
-    this.identifier = createID('mg-popover');
-    this.placement = 'bottom';
-    this.arrowHide = false;
-    this.closeButton = false;
-    this.display = false;
-    this.disabled = false;
-  }
-  validateIdentifier() {
-    // use renderPopoverContent to update popover-content id
-    this.renderPopoverContent();
-  }
-  validateArrowHide(newValue) {
-    if (newValue)
-      this.mgPopoverContent.dataset.arrowHide = '';
-    else
-      delete this.mgPopoverContent.dataset.arrowHide;
-  }
-  validateCloseButton(newValue) {
-    this.mgPopoverContent.closeButton = newValue;
-  }
-  handleDisplay(newValue) {
-    if (newValue) {
-      this.show();
+    render() {
+        return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
     }
-    else {
-      this.hide();
+    static get is() { return "mg-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css"]
+        };
     }
-    this.displayChange.emit(newValue);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * update popper position after props change on component did update hook to benefit from render ended
-   */
-  componentDidUpdate() {
-    this.popper.update();
-  }
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Get windows to attach events
-    this.windows = getWindows(window);
-    // render mg-popover-content slot
-    this.renderPopoverContent();
-    this.validateCloseButton(this.closeButton);
-    this.validateIdentifier();
-    this.validateArrowHide(this.arrowHide);
-  }
-  /**
-   * Check if component props are well configured on init
-   */
-  componentDidLoad() {
-    // Get popover content
-    this.mgPopover = this.element.querySelector(`#${this.identifier}`);
-    //Get interactive element (first element without slot attribute)
-    const interactiveElement = this.element.querySelector(':not([slot])');
-    // Add aria attributes
-    interactiveElement.setAttribute('aria-controls', this.identifier);
-    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-    // Create popperjs popover
-    this.popper = createPopper(interactiveElement, this.mgPopover, {
-      placement: this.placement,
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 0],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: ['auto'],
-          },
-        },
-      ],
-    });
-    // add resize observer
-    new ResizeObserver(() => {
-      this.popper.update();
-    }).observe(this.element.querySelector('mg-popover-content'));
-    // 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;
-        interactiveElement.focus();
-      }
-    });
-    this.handleDisplay(this.display);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
-  }
-  static get is() { return "mg-popover"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-popover')"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core",
-              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-popover')"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Popover placement"
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "arrowHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide popover arrow"
+                },
+                "attribute": "arrow-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "closeButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if popover has a cross button"
+                },
+                "attribute": "close-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "display": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display popover"
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable popover"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Popover placement"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      },
-      "arrowHide": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hide popover arrow"
-        },
-        "attribute": "arrow-hide",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "closeButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if popover has a cross button"
-        },
-        "attribute": "close-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "display": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display popover"
-        },
-        "attribute": "display",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disable popover"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "displayChange",
-        "name": "display-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when display value change"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "identifier",
-        "methodName": "validateIdentifier"
-      }, {
-        "propName": "arrowHide",
-        "methodName": "validateArrowHide"
-      }, {
-        "propName": "closeButton",
-        "methodName": "validateCloseButton"
-      }, {
-        "propName": "display",
-        "methodName": "handleDisplay"
-      }];
-  }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "displayChange",
+                "name": "display-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when display value change"
+                },
+                "complexType": {
+                    "original": "HTMLMgPopoverElement['display']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgPopoverElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgPopoverElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "identifier",
+                "methodName": "validateIdentifier"
+            }, {
+                "propName": "arrowHide",
+                "methodName": "validateArrowHide"
+            }, {
+                "propName": "closeButton",
+                "methodName": "validateCloseButton"
+            }, {
+                "propName": "display",
+                "methodName": "handleDisplay"
+            }];
+    }
 }
 //# sourceMappingURL=mg-popover.js.map