@scania/tegel 1.3.3 → 1.5.0

package/dist/collection/components/popover-core/popover-core.js

@@ -1,398 +1,398 @@
 import { Host, h, } from "@stencil/core";
 import { createPopper } from "@popperjs/core";
 export class TdsPopoverCore {
-  constructor() {
-    this.setIsShown = function setIsShown(isShown) {
-      if (typeof isShown === 'function') {
-        this.isShown = isShown(this.isShown);
-      }
-      else {
-        this.isShown = isShown;
-      }
-      if (this.isShown) {
-        this.tdsShow.emit();
-      }
-      else {
-        this.tdsClose.emit();
-      }
-    }.bind(this);
-    this.onClickTarget = function onClickTarget(event) {
-      event.stopPropagation();
-      this.setIsShown((isShown) => !isShown);
-    }.bind(this);
-    this.handleShow = function handleShow(event) {
-      event.stopPropagation();
-      this.setIsShown(true);
-    }.bind(this);
-    this.handleHide = function handleShow(event) {
-      event.stopPropagation();
-      this.setIsShown(false);
-    }.bind(this);
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = null;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.modifiers = [];
-    this.trigger = 'click';
-    this.autoHide = true;
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
-  }
-  onAnyClick(event) {
-    if (this.trigger === 'click' && this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.setIsShown(false);
-      }
-    }
-  }
-  /* To enable initial loading of a component if user controls show prop*/
-  componentWillLoad() {
-    this.setIsShown(this.show);
-  }
-  /* To observe any change of show prop after an initial load */
-  onShowChange(newValue) {
-    this.setIsShown(newValue);
-  }
-  onReferenceElChanged(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.initialize({ referenceEl: newValue, trigger: this.trigger });
-  }
-  onTriggerChanged(newValue) {
-    this.initialize({
-      referenceEl: this.referenceEl,
-      trigger: newValue,
-    });
-  }
-  initialize({ referenceEl, trigger, }) {
-    this.cleanUp();
-    if (typeof referenceEl !== 'undefined') {
-      this.target = referenceEl;
-    }
-    else {
-      this.target = this.selector ? document.querySelector(this.selector) : null;
+    constructor() {
+        this.setIsShown = function setIsShown(isShown) {
+            if (typeof isShown === 'function') {
+                this.isShown = isShown(this.isShown);
+            }
+            else {
+                this.isShown = isShown;
+            }
+            if (this.isShown) {
+                this.tdsShow.emit();
+            }
+            else {
+                this.tdsClose.emit();
+            }
+        }.bind(this);
+        this.onClickTarget = function onClickTarget(event) {
+            event.stopPropagation();
+            this.setIsShown((isShown) => !isShown);
+        }.bind(this);
+        this.handleShow = function handleShow(event) {
+            event.stopPropagation();
+            this.setIsShown(true);
+        }.bind(this);
+        this.handleHide = function handleShow(event) {
+            event.stopPropagation();
+            this.setIsShown(false);
+        }.bind(this);
+        this.selector = '';
+        this.referenceEl = undefined;
+        this.show = null;
+        this.placement = 'auto';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.modifiers = [];
+        this.trigger = 'click';
+        this.autoHide = true;
+        this.renderedShowValue = false;
+        this.popperInstance = undefined;
+        this.target = undefined;
+        this.isShown = false;
     }
-    this.popperInstance = this.target
-      ? createPopper(this.target, this.host, {
-        strategy: 'fixed',
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      })
-      : null;
-    if (!this.popperInstance) {
-      console.error(`Could not initialize: reference element not found.`);
+    onAnyClick(event) {
+        if (this.trigger === 'click' && this.isShown && this.show === null) {
+            // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+            const isClickOutside = !event.composedPath().includes(this.host);
+            if (isClickOutside) {
+                this.setIsShown(false);
+            }
+        }
     }
-    if (trigger === 'click' && this.show === null) {
-      this.target.addEventListener('click', this.onClickTarget);
+    /* To enable initial loading of a component if user controls show prop*/
+    componentWillLoad() {
+        this.setIsShown(this.show);
     }
-    if (trigger === 'hover' || trigger === 'hover-popover') {
-      // For tabbing over element
-      this.target.addEventListener('focusin', this.handleShow);
-      this.target.addEventListener('focusout', this.handleHide);
-      // For hovering over element with selector
-      this.target.addEventListener('mouseenter', this.handleShow);
-      this.target.addEventListener('mouseleave', this.handleHide);
-      // For hovering over Popover itself
-      if (trigger === 'hover-popover') {
-        this.host.addEventListener('mouseenter', this.handleShow);
-        this.host.addEventListener('mouseleave', this.handleHide);
-      }
+    /* To observe any change of show prop after an initial load */
+    onShowChange(newValue) {
+        this.setIsShown(newValue);
     }
-  }
-  cleanUp() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
-    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
-    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
-    (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
-    (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
-    (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
-    (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
-    (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
-  }
-  componentDidLoad() {
-    this.initialize({
-      referenceEl: this.referenceEl,
-      trigger: this.trigger,
-    });
-  }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
+    onReferenceElChanged(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.initialize({ referenceEl: newValue, trigger: this.trigger });
     }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    this.cleanUp();
-  }
-  render() {
-    let hostStyle = {};
-    if (this.autoHide) {
-      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    onTriggerChanged(newValue) {
+        this.initialize({
+            referenceEl: this.referenceEl,
+            trigger: newValue,
+        });
     }
-    return (h(Host, { style: hostStyle }, h("slot", null)));
-  }
-  static get is() { return "tds-popover-core"; }
-  static get encapsulation() { return "scoped"; }
-  static get properties() {
-    return {
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The CSS-selector for an element that will trigger the pop-over"
-        },
-        "attribute": "selector",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "referenceEl": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement | null",
-          "resolved": "HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Element that will trigger the pop-over (takes priority over selector)"
+    initialize({ referenceEl, trigger, }) {
+        this.cleanUp();
+        if (typeof referenceEl !== 'undefined') {
+            this.target = referenceEl;
         }
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides if the Popover Menu should be visible from the start"
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "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": ""
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides the placement of the Popover Menu"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "offsetSkidding": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset skidding"
-        },
-        "attribute": "offset-skidding",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "offsetDistance": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset distance"
-        },
-        "attribute": "offset-distance",
-        "reflect": false,
-        "defaultValue": "8"
-      },
-      "modifiers": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Object[]",
-          "resolved": "Object[]",
-          "references": {
-            "Object": {
-              "location": "global",
-              "id": "global::Object"
+        else {
+            this.target = this.selector ? document.querySelector(this.selector) : null;
+        }
+        this.popperInstance = this.target
+            ? createPopper(this.target, this.host, {
+                strategy: 'fixed',
+                placement: this.placement,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [this.offsetSkidding, this.offsetDistance],
+                        },
+                    },
+                    ...this.modifiers,
+                ],
+            })
+            : null;
+        if (!this.popperInstance) {
+            console.error(`Could not initialize: reference element not found.`);
+        }
+        if (trigger === 'click' && this.show === null) {
+            this.target.addEventListener('click', this.onClickTarget);
+        }
+        if (trigger === 'hover' || trigger === 'hover-popover') {
+            // For tabbing over element
+            this.target.addEventListener('focusin', this.handleShow);
+            this.target.addEventListener('focusout', this.handleHide);
+            // For hovering over element with selector
+            this.target.addEventListener('mouseenter', this.handleShow);
+            this.target.addEventListener('mouseleave', this.handleHide);
+            // For hovering over Popover itself
+            if (trigger === 'hover-popover') {
+                this.host.addEventListener('mouseenter', this.handleShow);
+                this.host.addEventListener('mouseleave', this.handleHide);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
-        },
-        "defaultValue": "[]"
-      },
-      "trigger": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'click' | 'hover' | 'hover-popover'",
-          "resolved": "\"click\" | \"hover\" | \"hover-popover\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "What triggers the popover to show"
-        },
-        "attribute": "trigger",
-        "reflect": false,
-        "defaultValue": "'click'"
-      },
-      "autoHide": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides if the popover should hide automatically.\nAlternatevly it can be hidden externally based on emitted events."
-        },
-        "attribute": "auto-hide",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "renderedShowValue": {},
-      "popperInstance": {},
-      "target": {},
-      "isShown": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsShow",
-        "name": "internalTdsShow",
-        "bubbles": false,
-        "cancelable": false,
-        "composed": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Show event."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{}",
-          "resolved": "{}",
-          "references": {}
         }
-      }, {
-        "method": "tdsClose",
-        "name": "internalTdsClose",
-        "bubbles": false,
-        "cancelable": false,
-        "composed": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Close event."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{}",
-          "resolved": "{}",
-          "references": {}
+    }
+    cleanUp() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
+        (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
+        (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
+        (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
+        (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
+        (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
+        (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
+        (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
+    }
+    componentDidLoad() {
+        this.initialize({
+            referenceEl: this.referenceEl,
+            trigger: this.trigger,
+        });
+    }
+    componentDidRender() {
+        if (this.isShown && !this.renderedShowValue) {
+            // Here we update the popper position since its position is wrong
+            // before it is rendered.
+            this.popperInstance.update();
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "show",
-        "methodName": "onShowChange"
-      }, {
-        "propName": "referenceEl",
-        "methodName": "onReferenceElChanged"
-      }, {
-        "propName": "trigger",
-        "methodName": "onTriggerChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onAnyClick",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        this.renderedShowValue = this.isShown;
+    }
+    disconnectedCallback() {
+        this.cleanUp();
+    }
+    render() {
+        let hostStyle = {};
+        if (this.autoHide) {
+            hostStyle = { display: this.isShown ? 'block' : 'none' };
+        }
+        return (h(Host, { style: hostStyle }, h("slot", null)));
+    }
+    static get is() { return "tds-popover-core"; }
+    static get encapsulation() { return "scoped"; }
+    static get properties() {
+        return {
+            "selector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS-selector for an element that will trigger the pop-over"
+                },
+                "attribute": "selector",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "referenceEl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | null",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Element that will trigger the pop-over (takes priority over selector)"
+                }
+            },
+            "show": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decides if the Popover Menu should be visible from the start"
+                },
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "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": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decides the placement of the Popover Menu"
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "offsetSkidding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the offset skidding"
+                },
+                "attribute": "offset-skidding",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "offsetDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the offset distance"
+                },
+                "attribute": "offset-distance",
+                "reflect": false,
+                "defaultValue": "8"
+            },
+            "modifiers": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Object[]",
+                    "resolved": "Object[]",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
+                },
+                "defaultValue": "[]"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover' | 'hover-popover'",
+                    "resolved": "\"click\" | \"hover\" | \"hover-popover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "What triggers the popover to show"
+                },
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "autoHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decides if the popover should hide automatically.\nAlternatevly it can be hidden externally based on emitted events."
+                },
+                "attribute": "auto-hide",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "renderedShowValue": {},
+            "popperInstance": {},
+            "target": {},
+            "isShown": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsShow",
+                "name": "internalTdsShow",
+                "bubbles": false,
+                "cancelable": false,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Show event."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{}",
+                    "resolved": "{}",
+                    "references": {}
+                }
+            }, {
+                "method": "tdsClose",
+                "name": "internalTdsClose",
+                "bubbles": false,
+                "cancelable": false,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Close event."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{}",
+                    "resolved": "{}",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "show",
+                "methodName": "onShowChange"
+            }, {
+                "propName": "referenceEl",
+                "methodName": "onReferenceElChanged"
+            }, {
+                "propName": "trigger",
+                "methodName": "onTriggerChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onAnyClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }