@limetech/lime-elements 36.0.0-next.2 → 36.0.0-next.22

package/dist/collection/components/code-editor/code-editor.css

@@ -343,15 +343,125 @@ div.CodeMirror-dragcursors {
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
 
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: #ffd;
+  border: 1px solid black;
+  border-radius: 4px 4px 4px 4px;
+  color: black;
+  font-family: monospace;
+  font-size: 10pt;
+  overflow: hidden;
+  padding: 2px 5px;
+  position: fixed;
+  white-space: pre;
+  white-space: pre-wrap;
+  z-index: 100;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .4s;
+  -moz-transition: opacity .4s;
+  -webkit-transition: opacity .4s;
+  -o-transition: opacity .4s;
+  -ms-transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-mark-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
+}
+
+.CodeMirror-lint-marker {
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.CodeMirror-lint-message {
+  padding-left: 18px;
+  background-position: top left;
+  background-repeat: no-repeat;
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  width: 100%; height: 100%;
+}
+
+.CodeMirror-lint-line-error {
+  background-color: rgba(183, 76, 81, 0.08);
+}
+
+.CodeMirror-lint-line-warning {
+  background-color: rgba(255, 211, 0, 0.1);
+}
+
+.CodeMirror-foldmarker {
+  color: blue;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: arial;
+  line-height: .3;
+  cursor: pointer;
+}
+.CodeMirror-foldgutter {
+  width: .7em;
+}
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+}
+.CodeMirror-foldgutter-open:after {
+  content: "\25BE";
+}
+.CodeMirror-foldgutter-folded:after {
+  content: "\25B8";
+}
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
+ * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.875rem`.
  */
 :host {
   display: flex;
-  font-size: 1rem;
+  font-size: var(--code-editor-font-size, 0.875rem);
 }
 
 .editor {
+  display: flex;
+  align-items: stretch;
   width: 100%;
 }
 .editor.is-light-mode {
@@ -477,6 +587,7 @@ span.CodeMirror-selectedtext { background: none; }
   background-color: rgb(var(--code-editor-background-color));
   border-radius: 0.25rem;
   height: auto;
+  width: 100%;
 }
 .cm-s-lime .CodeMirror-scroll {
   max-height: var(--code-editor-max-height, 10rem);
@@ -518,4 +629,45 @@ span.CodeMirror-selectedtext { background: none; }
   bottom: -0.4rem;
   left: 0;
   right: 0;
+}
+.cm-s-lime .CodeMirror-lint-marker-error,
+.cm-s-lime .CodeMirror-lint-message-error {
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
+  background-color: rgb(var(--color-red-default));
+  background-size: 0.75rem;
+  border-radius: 50%;
+}
+.cm-s-lime .CodeMirror-foldmarker {
+  position: relative;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+  color: transparent;
+  text-shadow: none;
+  padding: 0 0.5rem;
+  border-radius: 1rem;
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'><circle cx='16' cy='16' r='2'/><circle cx='26' cy='16' r='2'/><circle cx='6' cy='16' r='2'/></svg>");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.cm-s-lime .CodeMirror-foldmarker:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.cm-s-lime .CodeMirror-foldmarker:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.is-dark-mode .cm-s-lime .CodeMirror-foldmarker {
+  background-color: rgb(var(--contrast-1200));
+}
+.cm-s-lime [class^=CodeMirror-foldgutter] {
+  color: var(--code-editor-neutral-text-color);
+  transition: opacity 0.2s ease;
+  opacity: 0.4;
+}
+.cm-s-lime [class^=CodeMirror-foldgutter]:hover {
+  opacity: 1;
+}
+.cm-s-lime .CodeMirror-foldgutter-folded {
+  opacity: 0.7;
 }

package/dist/collection/components/code-editor/code-editor.js

@@ -1,14 +1,20 @@
-import { Component, h, Prop, Element, Event, State, } from '@stencil/core';
+import { Component, h, Prop, Element, Event, State, Watch, } from '@stencil/core';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/json-lint';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/brace-fold';
+import jslint from 'jsonlint-mod';
 /**
  * Currently this component support syntax highlighting for `javascript`,
  `json` and `typescript` formats.
  *
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+ * @exampleComponent limel-example-code-editor-fold-lint
  */
 export class CodeEditor {
   constructor() {
@@ -24,6 +30,14 @@ export class CodeEditor {
      * Displays line numbers in the editor
      */
     this.lineNumbers = false;
+    /**
+     * Allows the user to fold code
+     */
+    this.fold = false;
+    /**
+     * Enables linting of JSON content
+     */
+    this.lint = false;
     /**
      * Select color scheme for the editor
      */
@@ -65,6 +79,18 @@ export class CodeEditor {
     }
     this.editor = this.createEditor();
   }
+  watchValue(newValue) {
+    if (!this.editor) {
+      return;
+    }
+    const currentValue = this.editor.getValue();
+    if (newValue === currentValue) {
+      // Circuit breaker for when the change comes from the editor itself
+      // The caret position will be reset without this
+      return;
+    }
+    this.editor.getDoc().setValue(newValue);
+  }
   createEditor() {
     const options = this.getOptions();
     const editor = CodeMirror(this.host.shadowRoot.querySelector('.editor'), options);
@@ -75,6 +101,7 @@ export class CodeEditor {
     let mode = this.language;
     const TAB_SIZE = 4;
     let theme = 'lime light';
+    const gutters = [];
     if (this.isDarkMode()) {
       theme = 'lime dark';
     }
@@ -83,6 +110,13 @@ export class CodeEditor {
         name: 'application/json',
         json: true,
       };
+      if (this.lint) {
+        gutters.push('CodeMirror-lint-markers');
+        if (!('jsonlint' in window)) {
+          // eslint-disable-next-line @typescript-eslint/dot-notation
+          window['jsonlint'] = jslint;
+        }
+      }
     }
     else if (this.language === 'typescript') {
       mode = {
@@ -90,9 +124,12 @@ export class CodeEditor {
         typescript: true,
       };
     }
+    if (this.fold) {
+      gutters.push('CodeMirror-foldgutter');
+    }
     return {
       mode: mode,
-      value: this.value,
+      value: this.value || '',
       theme: theme,
       readOnly: this.readonly,
       tabSize: TAB_SIZE,
@@ -100,6 +137,9 @@ export class CodeEditor {
       lineNumbers: this.lineNumbers,
       styleActiveLine: true,
       matchBrackets: true,
+      lint: this.lint,
+      foldGutter: this.fold,
+      gutters: gutters,
     };
   }
   isDarkMode() {
@@ -208,6 +248,42 @@ export class CodeEditor {
       "reflect": false,
       "defaultValue": "false"
     },
+    "fold": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows the user to fold code"
+      },
+      "attribute": "fold",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "lint": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables linting of JSON content"
+      },
+      "attribute": "lint",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "colorScheme": {
       "type": "string",
       "mutable": false,
@@ -252,4 +328,8 @@ export class CodeEditor {
       }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "watchValue"
+    }]; }
 }

package/dist/collection/components/date-picker/date-picker.js

@@ -114,7 +114,7 @@ export class DatePicker {
     }
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
     return [
-      h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
+      h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
       h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } },
         h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
     ];
@@ -298,6 +298,23 @@ export class DatePicker {
       "attribute": "label",
       "reflect": true
     },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder text shown inside the input field, when the field is focused and empty"
+      },
+      "attribute": "placeholder",
+      "reflect": true
+    },
     "helperText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/date-picker/pickers/MonthPicker.js

@@ -74,9 +74,7 @@ export class MonthPicker extends Picker {
     })));
   }
   renderMonth(month, fp) {
-    return (h("div", { className: "datepicker-month", 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
+    return (h("div", { className: "datepicker-month", onClick: () => {
         const date = moment([fp.currentYear]).month(month).toDate();
         fp.setDate(date, true);
         fp.close();

package/dist/collection/components/date-picker/pickers/QuarterPicker.js

@@ -78,9 +78,7 @@ export class QuarterPicker extends Picker {
     })));
   }
   renderQuarter(quarter, fp) {
-    return (h("div", { className: "datepicker-quarter", id: `datepicker-quarter-${quarter}`, 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
+    return (h("div", { className: "datepicker-quarter", id: `datepicker-quarter-${quarter}`, onClick: () => {
         const date = moment([fp.currentYear])
           .quarter(quarter)
           .toDate();

package/dist/collection/components/date-picker/pickers/YearPicker.js

@@ -106,9 +106,7 @@ export class YearPicker extends Picker {
     })));
   }
   renderYear(year, fp) {
-    return (h("div", { className: "datepicker-year", 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
+    return (h("div", { className: "datepicker-year", onClick: () => {
         const date = moment(year).toDate();
         fp.setDate(date, true);
         fp.close();

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -0,0 +1,72 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly used by outside code.
+ */
+.button {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: var(--dock-item-height);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  padding: 0 0.5rem;
+  min-width: var(--dock-item-height);
+  color: var(--limel-dock-item-text-color);
+  background-color: var(--dock-background-color);
+}
+.button:focus-visible {
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.dock-item:not(.selected) .button:not(.disabled) {
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+}
+.dock-item:not(.selected) .button:not(.disabled):hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.dock-item:not(.selected) .button:not(.disabled):active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.button:hover {
+  z-index: 1;
+}
+.button.selected {
+  color: var(--limel-dock-item-text-color--selected);
+  background-color: var(--dock-item-background-color--selected, rgb(var(--contrast-200)));
+  box-shadow: var(--button-shadow-inset);
+}
+.button.selected .icon {
+  color: var(--limel-dock-item-text--selected);
+}
+
+limel-popover {
+  display: grid;
+  grid-template-columns: 100%;
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: calc(var(--dock-item-height) - 1rem);
+  height: calc(var(--dock-item-height) - 1rem);
+  color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
+}

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

@@ -0,0 +1,204 @@
+import { Component, Event, h, Prop, State } from '@stencil/core';
+import { createRandomString } from '../../../util/random-string';
+/**
+ * @private
+ */
+export class DockButton {
+  constructor() {
+    /**
+     * When the dock is expanded or collapsed, dock items
+     * show labels and tooltips as suitable for the layout.
+     */
+    this.expanded = false;
+    /**
+     * When dock is using mobile layout, dock items
+     * show labels and tooltips as suitable for the layout.
+     */
+    this.useMobileLayout = false;
+    /**
+     * Indicated whether the popover that renders a component is open.
+     */
+    this.isOpen = false;
+    this.openPopover = (event) => {
+      event.stopPropagation();
+      this.isOpen = true;
+      this.menuOpen.emit(this.item);
+    };
+    this.onPopoverClose = () => {
+      this.isOpen = false;
+      this.close.emit();
+    };
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.itemSelected.emit(this.item);
+    };
+    this.tooltipId = createRandomString();
+  }
+  render() {
+    var _a, _b;
+    if ((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu) === null || _b === void 0 ? void 0 : _b.componentName) {
+      return this.renderPopover();
+    }
+    return this.renderButton(this.handleClick);
+  }
+  renderPopover() {
+    var _a;
+    const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
+    return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose },
+      this.renderButton(this.openPopover, 'trigger'),
+      h(CustomComponent, Object.assign({}, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
+  }
+  renderButton(handleClick, slot) {
+    var _a;
+    return (h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
+        button: true,
+        selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
+      }, onClick: handleClick },
+      this.renderIcon(),
+      this.renderLabel(),
+      this.renderTooltip()));
+  }
+  renderIcon() {
+    if (!this.item.icon) {
+      return;
+    }
+    return h("limel-icon", { name: this.item.icon, class: "icon" });
+  }
+  renderLabel() {
+    if (this.expanded) {
+      return h("span", { class: "text" }, this.item.label);
+    }
+  }
+  renderTooltip() {
+    if (!this.expanded && this.item.label) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel }));
+    }
+    if (this.expanded && this.item.helperLabel) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel }));
+    }
+  }
+  static get is() { return "limel-dock-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["dock-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dock-button.css"]
+  }; }
+  static get properties() { return {
+    "item": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "../dock.types"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Item that is placed in the dock."
+      }
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "useMobileLayout": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When dock is using mobile layout, dock items\nshow labels and tooltips as suitable for the layout."
+      },
+      "attribute": "use-mobile-layout",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {}
+  }; }
+  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": "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": {}
+      }
+    }]; }
+}