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

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

@@ -1,33 +1,23 @@
-import { Component, h, Prop, Element, Event, State, } from '@stencil/core';
+import { h, } 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() {
-    /**
-     * The code to be rendered
-     */
-    this.value = '';
-    /**
-     * Disables editing of the editor content
-     */
-    this.readonly = false;
-    /**
-     * Displays line numbers in the editor
-     */
-    this.lineNumbers = false;
-    /**
-     * Select color scheme for the editor
-     */
-    this.colorScheme = 'auto';
     this.handleChangeDarkMode = () => {
       if (this.colorScheme !== 'auto') {
         return;
@@ -43,6 +33,14 @@ export class CodeEditor {
       }
       this.editor.refresh();
     };
+    this.value = '';
+    this.language = undefined;
+    this.readonly = false;
+    this.lineNumbers = false;
+    this.fold = false;
+    this.lint = false;
+    this.colorScheme = 'auto';
+    this.random = undefined;
   }
   connectedCallback() {
     this.observer = new ResizeObserver(this.handleResize);
@@ -65,16 +63,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 +102,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 +116,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 +129,9 @@ export class CodeEditor {
       lineNumbers: this.lineNumbers,
       styleActiveLine: true,
       matchBrackets: true,
+      lint: this.lint,
+      foldGutter: this.fold,
+      gutters: gutters,
     };
   }
   isDarkMode() {
@@ -125,131 +157,183 @@ export class CodeEditor {
   }
   static get is() { return "limel-code-editor"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["code-editor.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["code-editor.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The code to be rendered"
+  static get originalStyleUrls() {
+    return {
+      "$": ["code-editor.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["code-editor.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The code to be rendered"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Language",
-        "resolved": "\"javascript\" | \"json\" | \"typescript\"",
-        "references": {
-          "Language": {
-            "location": "import",
-            "path": "./code-editor.types"
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Language",
+          "resolved": "\"javascript\" | \"json\" | \"typescript\"",
+          "references": {
+            "Language": {
+              "location": "import",
+              "path": "./code-editor.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The language of the code"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The language of the code"
+        },
+        "attribute": "language",
+        "reflect": false
       },
-      "attribute": "language",
-      "reflect": false
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables editing of the editor content"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables editing of the editor content"
+      "lineNumbers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays line numbers in the editor"
+        },
+        "attribute": "line-numbers",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "lineNumbers": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Displays line numbers in the editor"
+      "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"
       },
-      "attribute": "line-numbers",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "colorScheme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ColorScheme",
-        "resolved": "\"auto\" | \"dark\" | \"light\"",
-        "references": {
-          "ColorScheme": {
-            "location": "import",
-            "path": "./code-editor.types"
+      "colorScheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorScheme",
+          "resolved": "\"auto\" | \"dark\" | \"light\"",
+          "references": {
+            "ColorScheme": {
+              "location": "import",
+              "path": "./code-editor.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Select color scheme for the editor"
-      },
-      "attribute": "color-scheme",
-      "reflect": false,
-      "defaultValue": "'auto'"
-    }
-  }; }
-  static get states() { return {
-    "random": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the code has changed. Will only be emitted when the code\narea has lost focus"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Select color scheme for the editor"
+        },
+        "attribute": "color-scheme",
+        "reflect": false,
+        "defaultValue": "'auto'"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "random": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the code has changed. Will only be emitted when the code\narea has lost focus"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   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;