@limetech/lime-elements 36.0.0-next.9 → 36.0.0

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,16 +79,37 @@ 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);
     editor.on('change', this.handleChange);
+    // Replace tab with spaces and use the actual indent setting for
+    // the space count
+    editor.setOption('extraKeys', {
+      Tab: (codeMirror) => {
+        const spaces = Array(codeMirror.getOption('indentUnit') + 1).join(' ');
+        codeMirror.replaceSelection(spaces);
+      },
+    });
     return editor;
   }
   getOptions() {
     let mode = this.language;
     const TAB_SIZE = 4;
     let theme = 'lime light';
+    const gutters = [];
     if (this.isDarkMode()) {
       theme = 'lime dark';
     }
@@ -83,6 +118,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 +132,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 +145,9 @@ export class CodeEditor {
       lineNumbers: this.lineNumbers,
       styleActiveLine: true,
       matchBrackets: true,
+      lint: this.lint,
+      foldGutter: this.fold,
+      gutters: gutters,
     };
   }
   isDarkMode() {
@@ -208,6 +256,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 +336,8 @@ export class CodeEditor {
       }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "watchValue"
+    }]; }
 }

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -63,7 +63,7 @@
 /**
  * @prop --closed-header-background-color: background color for header when closed
  * @prop --open-header-background-color: background color for header when open
- * @prop --header-stroke-color: color of the animated icons that visulize collapsed or normal states of the headers, as well as the divider line on headers
+ * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers
  * @prop --body-background-color: background color for body
  * @prop --body-padding: space around content of the body
  */
@@ -92,6 +92,13 @@
   background-color: var(--closed-header-background-color, rgb(var(--contrast-200)));
   border-radius: var(--border-radius-of-header);
 }
+.section__header:focus {
+  outline: none;
+}
+.section__header:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 section.open .section__header {
   background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
   border-radius: var(--border-radius-of-header) var(--border-radius-of-header) 0 0;
@@ -102,12 +109,6 @@ section.open .section__header:hover {
 .section__header:hover {
   background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
 }
-.section__header:focus {
-  outline: none;
-}
-.section__header:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-}
 
 .section__header__title {
   -moz-osx-font-smoothing: grayscale;

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/dock/dock-button/dock-button.css

@@ -12,6 +12,8 @@
  */
 .button {
   all: unset;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -25,20 +27,20 @@
   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 {
+.button:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-.dock-item:not(.selected) .button:not(.disabled):active {
+.button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+.button:focus {
+  outline: none;
+}
+.button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .button:hover {
   z-index: 1;
 }
@@ -47,12 +49,16 @@
   background-color: var(--dock-item-background-color--selected, rgb(var(--contrast-200)));
   box-shadow: var(--button-shadow-inset);
 }
+.button.selected:focus-visible {
+  box-shadow: var(--button-shadow-inset), var(--shadow-depth-8-focused);
+}
 .button.selected .icon {
   color: var(--limel-dock-item-text--selected);
 }
 
 limel-popover {
   display: grid;
+  grid-template-columns: 100%;
 }
 
 .text {

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, State } from '@stencil/core';
+import { Component, Event, h, Prop, State, Watch, } from '@stencil/core';
 import { createRandomString } from '../../../util/random-string';
 /**
  * @private
@@ -6,17 +6,26 @@ import { createRandomString } from '../../../util/random-string';
 export class DockButton {
   constructor() {
     /**
-     * @inheritdoc
+     * When the dock is expanded or collapsed, dock items
+     * show labels and tooltips as suitable for the layout.
      */
     this.expanded = false;
     /**
-     * @inheritdoc
+     * 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.setCustomComponentElement = (element) => {
+      this.customComponentElement = element;
     };
     this.onPopoverClose = () => {
       this.isOpen = false;
@@ -24,7 +33,13 @@ export class DockButton {
     };
     this.handleClick = (event) => {
       event.stopPropagation();
-      this.interact.emit(this.item);
+      this.itemSelected.emit(this.item);
+    };
+    this.focusCustomComponentElement = () => {
+      var _a, _b, _c;
+      if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
+        (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
+      }
     };
     this.tooltipId = createRandomString();
   }
@@ -35,12 +50,19 @@ export class DockButton {
     }
     return this.renderButton(this.handleClick);
   }
+  openWatcher() {
+    if (!this.isOpen) {
+      return;
+    }
+    const observer = new IntersectionObserver(this.focusCustomComponentElement);
+    observer.observe(this.customComponentElement);
+  }
   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 }))));
+      h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
   }
   renderButton(handleClick, slot) {
     var _a;
@@ -95,11 +117,8 @@ export class DockButton {
       "required": true,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Item that is placed in the dock."
       }
     },
     "expanded": {
@@ -113,11 +132,8 @@ export class DockButton {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -134,11 +150,8 @@ export class DockButton {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+        "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,
@@ -149,14 +162,34 @@ export class DockButton {
     "isOpen": {}
   }; }
   static get events() { return [{
-      "method": "interact",
-      "name": "interact",
+      "method": "itemSelected",
+      "name": "itemSelected",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when clicking on the flow item."
+        "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",
@@ -176,7 +209,7 @@ export class DockButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fired when the popover is closed."
       },
       "complexType": {
         "original": "void",
@@ -184,4 +217,8 @@ export class DockButton {
         "references": {}
       }
     }]; }
+  static get watchers() { return [{
+      "propName": "isOpen",
+      "methodName": "openWatcher"
+    }]; }
 }

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

@@ -92,15 +92,19 @@ nav::-webkit-scrollbar {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+.expand-shrink:focus {
+  outline: none;
+}
+.expand-shrink:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .expand-shrink.expanded {
   justify-content: flex-end;
 }
 .expand-shrink.expanded limel-icon {
   transform: rotateY(180deg);
 }
-.expand-shrink:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-}
 .expand-shrink limel-icon {
   width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
   color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));

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

@@ -56,12 +56,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) {
@@ -239,7 +234,7 @@ export class Dock {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when a Dock item has been selected from the dock."
+        "text": "Fired when a dock item has been selected from the dock."
       },
       "complexType": {
         "original": "DockItem",
@@ -251,6 +246,41 @@ export class Dock {
           }
         }
       }
+    }, {
+      "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",

package/dist/collection/components/input-field/input-field.js

@@ -7,6 +7,7 @@ import { createRandomString } from '../../util/random-string';
 const helperTextId = 'tf-helper-text';
 /**
  * @exampleComponent limel-example-input-field-text
+ * @exampleComponent limel-example-input-field-placeholder
  * @exampleComponent limel-example-input-field-text-multiple
  * @exampleComponent limel-example-input-field-number
  * @exampleComponent limel-example-input-field-autocomplete
@@ -101,6 +102,7 @@ export class InputField {
     this.getContainerClassList = () => {
       const classList = {
         'mdc-text-field': true,
+        'mdc-text-field--no-label': !this.label,
         'mdc-text-field--outlined': true,
         'mdc-text-field--invalid': this.isInvalid(),
         'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -127,7 +129,7 @@ export class InputField {
         return;
       }
       const type = this.type === 'urlAsText' ? 'text' : this.type;
-      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
+      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value, placeholder: this.placeholder })));
     };
     this.renderTextarea = (properties) => {
       if (this.type !== 'textarea') {
@@ -252,6 +254,17 @@ export class InputField {
       }
       return this.limelInputField.shadowRoot.querySelector(elementName);
     };
+    this.renderLabel = (labelId) => {
+      const labelClassList = {
+        'mdc-floating-label': true,
+        'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
+      };
+      if (!this.label) {
+        return;
+      }
+      return (h("span", { class: "mdc-notched-outline__notch" },
+        h("span", { class: labelClassList, id: labelId }, this.label)));
+    };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
         return;
@@ -516,16 +529,11 @@ export class InputField {
       properties['aria-controls'] = helperTextId;
       properties['aria-describedby'] = helperTextId;
     }
-    const labelClassList = {
-      'mdc-floating-label': true,
-      'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
-    };
     return [
       h("label", { class: this.getContainerClassList() },
         h("span", { class: "mdc-notched-outline", tabindex: "-1" },
           h("span", { class: "mdc-notched-outline__leading" }),
-          h("span", { class: "mdc-notched-outline__notch" },
-            h("span", { class: labelClassList, id: labelId }, this.label)),
+          this.renderLabel(labelId),
           h("span", { class: "mdc-notched-outline__trailing" })),
         this.renderLeadingIcon(),
         this.renderEmptyValueForReadonly(),
@@ -627,6 +635,23 @@ export class InputField {
       "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/menu/menu.js

@@ -66,13 +66,8 @@ export class Menu {
       }
       this.open = !this.open;
     };
-    this.onListChange = (event) => {
-      this.items = this.items.map((item) => {
-        if (item === event.detail) {
-          return event.detail;
-        }
-        return item;
-      });
+    this.handleSelect = (event) => {
+      event.stopPropagation();
       this.select.emit(event.detail);
       this.open = false;
     };
@@ -90,12 +85,6 @@ export class Menu {
     };
     this.portalId = createRandomString();
   }
-  componentDidLoad() {
-    if (!this.host.querySelector('[slot="trigger"]')) {
-      // eslint-disable-next-line no-console
-      console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
-    }
-  }
   openWatcher() {
     if (!this.open) {
       return;
@@ -117,7 +106,7 @@ export class Menu {
           } },
           h("limel-menu-list", { class: {
               'has-grid-layout has-interactive-items': this.gridLayout,
-            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
+            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
   }
   componentDidRender() {
     const slotElement = this.host.shadowRoot.querySelector('slot');