@limetech/lime-elements 36.0.0 → 36.1.0-dev.1

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Element, Event, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { zipObject } from 'lodash-es';
 import { portalContains } from '../portal/contains';
@@ -56,10 +56,6 @@ import { ESCAPE } from '../../util/keycodes';
  */
 export class Popover {
   constructor() {
-    /**
-     * True if the content within the popover should be visible
-     */
-    this.open = false;
     this.handleGlobalKeyPress = (event) => {
       if (event.key !== ESCAPE) {
         return;
@@ -68,6 +64,8 @@ export class Popover {
       event.preventDefault();
       this.close.emit();
     };
+    this.open = false;
+    this.openDirection = undefined;
     this.portalId = createRandomString();
     this.globalClickListener = this.globalClickListener.bind(this);
   }
@@ -92,10 +90,7 @@ export class Popover {
   render() {
     const cssProperties = this.getCssProperties();
     const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-    return (h("div", { class: "trigger-anchor" },
-      h("slot", { name: "trigger" }),
-      h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection },
-        h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
+    return (h("div", { class: "trigger-anchor" }, h("slot", { name: "trigger" }), h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
   }
   globalClickListener(event) {
     const element = event.target;
@@ -120,73 +115,83 @@ export class Popover {
   }
   static get is() { return "limel-popover"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["popover.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["popover.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the content within the popover should be visible"
+  static get originalStyleUrls() {
+    return {
+      "$": ["popover.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["popover.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the content within the popover should be visible"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "openDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OpenDirection",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "OpenDirection": {
-            "location": "import",
-            "path": "../menu/menu.types"
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "../menu/menu.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Decides the popover's location in relation to its trigger"
-      },
-      "attribute": "open-direction",
-      "reflect": true
-    }
-  }; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the component is closing"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides the popover's location in relation to its trigger"
+        },
+        "attribute": "open-direction",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the component is closing"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "watchOpen"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "watchOpen"
+      }];
+  }
 }

package/dist/collection/components/popover-surface/popover-surface.css

@@ -4,6 +4,10 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+:host(limel-popover-surface) {
+  isolation: isolate;
+}
+
 .limel-popover-surface {
   position: relative;
   display: flex;

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

@@ -1,9 +1,12 @@
-import { Component, h, Prop, Element } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @slot - Content to put inside the surface
  * @private
  */
 export class PopoverSurface {
+  constructor() {
+    this.contentCollection = undefined;
+  }
   componentDidLoad() {
     this.appendElement();
   }
@@ -21,32 +24,38 @@ export class PopoverSurface {
   }
   static get is() { return "limel-popover-surface"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["popover-surface.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["popover-surface.css"]
-  }; }
-  static get properties() { return {
-    "contentCollection": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLCollection",
-        "resolved": "HTMLCollection",
-        "references": {
-          "HTMLCollection": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["popover-surface.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["popover-surface.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "contentCollection": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLCollection",
+          "resolved": "HTMLCollection",
+          "references": {
+            "HTMLCollection": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Content to render"
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Content to render"
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/portal/portal.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createPopper, } from '@popperjs/core';
 /* eslint-disable jsdoc/check-indentation */
 /**
@@ -29,35 +29,14 @@ import { createPopper, } from '@popperjs/core';
 /* eslint-enable jsdoc/check-indentation */
 export class Portal {
   constructor() {
-    /**
-     * Decides which direction the portal content should open.
-     */
+    this.loaded = false;
     this.openDirection = 'bottom';
-    /**
-     * Position of the content.
-     */
     this.position = 'absolute';
-    /**
-     * Dynamic styling that can be applied to the container holding the content.
-     */
+    this.containerId = undefined;
     this.containerStyle = {};
-    /**
-     * Parent element to move the content to.
-     */
     this.parent = document.body;
-    /**
-     * Used to make a dropdown have the same width as the trigger, for example
-     * in `limel-picker`.
-     */
     this.inheritParentWidth = false;
-    /**
-     * True if the content within the portal should be visible.
-     *
-     * If the content is from within a dialog for instance, this can be set to
-     * true from false when the dialog opens to position the content properly.
-     */
     this.visible = false;
-    this.loaded = false;
     this.parents = new WeakMap();
   }
   onVisible() {
@@ -249,147 +228,155 @@ export class Portal {
   }
   static get is() { return "limel-portal"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["portal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["portal.css"]
-  }; }
-  static get properties() { return {
-    "openDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OpenDirection",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "OpenDirection": {
-            "location": "import",
-            "path": "../menu/menu.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["portal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["portal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "../menu/menu.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Decides which direction the portal content should open."
-      },
-      "attribute": "open-direction",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'fixed' | 'absolute'",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Position of the content."
-      },
-      "attribute": "position",
-      "reflect": false,
-      "defaultValue": "'absolute'"
-    },
-    "containerId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides which direction the portal content should open."
+        },
+        "attribute": "open-direction",
+        "reflect": false,
+        "defaultValue": "'bottom'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A unique ID."
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'fixed' | 'absolute'",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the content."
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "'absolute'"
       },
-      "attribute": "container-id",
-      "reflect": false
-    },
-    "containerStyle": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object",
-        "resolved": "object",
-        "references": {}
+      "containerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A unique ID."
+        },
+        "attribute": "container-id",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Dynamic styling that can be applied to the container holding the content."
+      "containerStyle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Dynamic styling that can be applied to the container holding the content."
+        },
+        "defaultValue": "{}"
       },
-      "defaultValue": "{}"
-    },
-    "parent": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
+      "parent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Parent element to move the content to."
-      },
-      "defaultValue": "document.body"
-    },
-    "inheritParentWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used to make a dropdown have the same width as the trigger, for example\nin `limel-picker`."
-      },
-      "attribute": "inherit-parent-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "visible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Parent element to move the content to."
+        },
+        "defaultValue": "document.body"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the content within the portal should be visible.\n\nIf the content is from within a dialog for instance, this can be set to\ntrue from false when the dialog opens to position the content properly."
+      "inheritParentWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to make a dropdown have the same width as the trigger, for example\nin `limel-picker`."
+        },
+        "attribute": "inherit-parent-width",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "visible",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "visible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the content within the portal should be visible.\n\nIf the content is from within a dialog for instance, this can be set to\ntrue from false when the dialog opens to position the content properly."
+        },
+        "attribute": "visible",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "visible",
-      "methodName": "onVisible"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "visible",
+        "methodName": "onVisible"
+      }];
+  }
 }