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

package/dist/collection/components/dock/dock.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop, State, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 const DEFAULT_MOBILE_BREAKPOINT = 700;
 /**
  * @exampleComponent limel-example-dock-basic
@@ -10,45 +10,6 @@ const DEFAULT_MOBILE_BREAKPOINT = 700;
  */
 export class Dock {
   constructor() {
-    /**
-     * Items that are placed in the dock.
-     */
-    this.dockItems = [];
-    /**
-     * Items that are placed at the bottom of the dock. (Or at the end in mobile
-     * layout.)
-     */
-    this.dockFooterItems = [];
-    /**
-     * Defines the width of the component, when it loads.
-     * - `true`: shows both icons and labels of the Dock items.
-     * - `false`: only shows icons of the doc items, and displays
-     * their labels as tooltip.
-     *
-     * Note: when `useMobileLayout` is `true`, labels will always
-     * be shown as tooltips. Read more below…
-     */
-    this.expanded = false;
-    /**
-     * Set to `false` if you do not want to allow end-users
-     * to exapnd or shrink the Dock. This will hide the
-     * expand/shrink button, and the only things that defines
-     * the layout will be the `expanded` property, and
-     * the `mobileBreakPoint`.
-     */
-    this.allowResize = true;
-    /**
-     * Defines the breakpoint in pixles, at which the component will be rendered
-     * in a hoizontal layout. Default breakpoint is `700` pixels, which means
-     * when the screen size is smaller than `700px`, the component will automatically
-     * switch to a horizontal layout.
-     */
-    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
-    /**
-     * Is used to render the component horizontally, and place
-     * the Dock items in a row.
-     */
-    this.useMobileLayout = false;
     this.renderSeparator = () => {
       return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
     };
@@ -56,12 +17,7 @@ export class Dock {
       return (h("limel-dock-button", { class: {
           'dock-item': true,
           selected: item.selected,
-        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout, onInteract: this.handleDockItemClick }));
-    };
-    this.handleDockItemClick = (event) => {
-      if (!event.detail.selected) {
-        this.itemSelected.emit(event.detail);
-      }
+        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
     };
     this.handleResize = () => {
       if (window.innerWidth <= this.mobileBreakPoint) {
@@ -75,6 +31,13 @@ export class Dock {
       this.expanded = !this.expanded;
       this.dockExpanded.emit(this.expanded);
     };
+    this.dockItems = [];
+    this.dockFooterItems = [];
+    this.accessibleLabel = undefined;
+    this.expanded = false;
+    this.allowResize = true;
+    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
+    this.useMobileLayout = false;
   }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -88,12 +51,7 @@ export class Dock {
         dock: true,
         expanded: this.expanded,
         'has-mobile-layout': this.useMobileLayout,
-      } },
-      h("nav", { "aria-label": this.accessibleLabel },
-        this.dockItems.map(this.renderDockItem),
-        this.renderSeparator(),
-        this.dockFooterItems.map(this.renderDockItem)),
-      this.renderExpandShrinkToggle()));
+      } }, h("nav", { "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
   }
   renderExpandShrinkToggle() {
     if (this.useMobileLayout || !this.allowResize) {
@@ -102,169 +60,213 @@ export class Dock {
     return (h("button", { class: {
         'expand-shrink': true,
         expanded: this.expanded,
-      }, onClick: this.toggleDockWidth },
-      h("limel-icon", { name: "angle_right" })));
+      }, onClick: this.toggleDockWidth }, h("limel-icon", { name: "angle_right" })));
   }
   static get is() { return "limel-dock"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dock.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dock.css"]
-  }; }
-  static get properties() { return {
-    "dockItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DockItem[]",
-        "resolved": "DockItem[]",
-        "references": {
-          "DockItem": {
-            "location": "import",
-            "path": "./dock.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["dock.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dock.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dockItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DockItem[]",
+          "resolved": "DockItem[]",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "./dock.types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Items that are placed in the dock."
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Items that are placed in the dock."
-      },
-      "defaultValue": "[]"
-    },
-    "dockFooterItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DockItem[]",
-        "resolved": "DockItem[]",
-        "references": {
-          "DockItem": {
-            "location": "import",
-            "path": "./dock.types"
+      "dockFooterItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DockItem[]",
+          "resolved": "DockItem[]",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "./dock.types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
+        },
+        "attribute": "accessible-label",
+        "reflect": true
       },
-      "defaultValue": "[]"
-    },
-    "accessibleLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
+      "allowResize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
+        },
+        "attribute": "allow-resize",
+        "reflect": true,
+        "defaultValue": "true"
       },
-      "attribute": "accessible-label",
-      "reflect": true
-    },
-    "expanded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
-      },
-      "attribute": "expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "allowResize": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
-      },
-      "attribute": "allow-resize",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "mobileBreakPoint": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
-      },
-      "attribute": "mobile-break-point",
-      "reflect": true,
-      "defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
-    }
-  }; }
-  static get states() { return {
-    "useMobileLayout": {}
-  }; }
-  static get events() { return [{
-      "method": "itemSelected",
-      "name": "itemSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a Dock item has been selected from the dock."
-      },
-      "complexType": {
-        "original": "DockItem",
-        "resolved": "DockItem",
-        "references": {
-          "DockItem": {
-            "location": "import",
-            "path": "./dock.types"
+      "mobileBreakPoint": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
+        },
+        "attribute": "mobile-break-point",
+        "reflect": true,
+        "defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "useMobileLayout": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelected",
+        "name": "itemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a dock item has been selected from the dock."
+        },
+        "complexType": {
+          "original": "DockItem",
+          "resolved": "DockItem",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "./dock.types"
+            }
           }
         }
-      }
-    }, {
-      "method": "dockExpanded",
-      "name": "dockExpanded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a Dock is expanded or collapsed."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "method": "menuOpen",
+        "name": "menuOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a dock menu is opened."
+        },
+        "complexType": {
+          "original": "DockItem",
+          "resolved": "DockItem",
+          "references": {
+            "DockItem": {
+              "location": "import",
+              "path": "./dock.types"
+            }
+          }
+        }
+      }, {
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when the popover is closed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "dockExpanded",
+        "name": "dockExpanded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a Dock is expanded or collapsed."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
 }