@limetech/lime-elements 34.1.0-next.6 → 34.1.0

package/dist/collection/components/chip-set/chip-set.js

@@ -66,6 +66,25 @@ export class ChipSet {
     this.dropZoneTip = () => {
       return translate.get('file.drag-and-drop-tips', this.language);
     };
+    this.renderHelperLine = () => {
+      if (!this.hasHelperText()) {
+        return;
+      }
+      return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" }, this.renderHelperText()));
+    };
+    this.renderHelperText = () => {
+      if (!this.hasHelperText()) {
+        return;
+      }
+      const classList = {
+        'mdc-text-field-helper-text': true,
+        'mdc-text-field-helper-text--validation-msg': this.isInvalid(),
+      };
+      return h("p", { class: classList }, this.helperText);
+    };
+    this.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
+    };
     this.clearAllChipsLabel = () => {
       return translate.get('chip-set.clear-all', this.language);
     };
@@ -161,7 +180,8 @@ export class ChipSet {
     }
     return (h("div", { class: classes, role: "grid" },
       chipSetLabel,
-      this.value.map(this.renderChip)));
+      this.value.map(this.renderChip),
+      this.renderHelperLine()));
   }
   handleChangeChips() {
     this.syncEmptyInput();
@@ -189,41 +209,44 @@ export class ChipSet {
     return (h("label", { class: "chip-set__label mdc-floating-label mdc-floating-label--float-above" }, this.label));
   }
   renderInputChips() {
-    return (h("div", { class: {
-        'mdc-text-field mdc-text-field--outlined': true,
-        'mdc-chip-set mdc-chip-set--input': true,
-        'force-invalid': this.isInvalid(),
-        'mdc-text-field--disabled': this.readonly || this.disabled,
-        'lime-text-field--readonly': this.readonly,
-        'has-chips mdc-text-field--label-floating': this.value.length !== 0,
-        'has-leading-icon': this.leadingIcon !== null,
-        'has-clear-all-button': this.clearAllButton,
-      }, onClick: this.handleTextFieldFocus },
-      this.value.map(this.renderInputChip),
-      h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: "text", id: "input-element", disabled: this.readonly || this.disabled, class: {
-          'mdc-text-field__input': true,
-          hidden: this.inputHidden(),
-        }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput, 
-        // Some browsers emit a change event on input elements, we need to stop
-        // that event from propagating since we are emitting our own change event
-        onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull() }),
+    return [
       h("div", { class: {
-          'mdc-notched-outline': true,
-          'mdc-notched-outline--upgraded': true,
-          'mdc-text-field--required': this.required,
-          'lime-notched-outline--notched': !!(this.value.length || this.editMode),
-        }, "dropzone-tip": this.dropZoneTip() },
-        h("div", { class: "mdc-notched-outline__leading" }),
-        h("div", { class: "mdc-notched-outline__notch" },
-          h("label", { class: {
-              'mdc-floating-label': true,
-              'mdc-text-field--disabled': this.readonly || this.disabled,
-              'mdc-floating-label--required': this.required,
-              'lime-floating-label--float-above': !!(this.value.length || this.editMode),
-            }, htmlFor: "input-element" }, this.label)),
-        h("div", { class: "mdc-notched-outline__trailing" })),
-      this.renderLeadingIcon(),
-      this.renderClearAllChipsButton()));
+          'mdc-text-field mdc-text-field--outlined': true,
+          'mdc-chip-set mdc-chip-set--input': true,
+          'force-invalid': this.isInvalid(),
+          'mdc-text-field--disabled': this.readonly || this.disabled,
+          'lime-text-field--readonly': this.readonly,
+          'has-chips mdc-text-field--label-floating': this.value.length !== 0,
+          'has-leading-icon': this.leadingIcon !== null,
+          'has-clear-all-button': this.clearAllButton,
+        }, onClick: this.handleTextFieldFocus },
+        this.value.map(this.renderInputChip),
+        h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: "text", id: "input-element", disabled: this.readonly || this.disabled, class: {
+            'mdc-text-field__input': true,
+            hidden: this.inputHidden(),
+          }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput, 
+          // Some browsers emit a change event on input elements, we need to stop
+          // that event from propagating since we are emitting our own change event
+          onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull() }),
+        h("div", { class: {
+            'mdc-notched-outline': true,
+            'mdc-notched-outline--upgraded': true,
+            'mdc-text-field--required': this.required,
+            'lime-notched-outline--notched': !!(this.value.length || this.editMode),
+          }, "dropzone-tip": this.dropZoneTip() },
+          h("div", { class: "mdc-notched-outline__leading" }),
+          h("div", { class: "mdc-notched-outline__notch" },
+            h("label", { class: {
+                'mdc-floating-label': true,
+                'mdc-text-field--disabled': this.readonly || this.disabled,
+                'mdc-floating-label--required': this.required,
+                'lime-floating-label--float-above': !!(this.value.length || this.editMode),
+              }, htmlFor: "input-element" }, this.label)),
+          h("div", { class: "mdc-notched-outline__trailing" })),
+        this.renderLeadingIcon(),
+        this.renderClearAllChipsButton()),
+      this.renderHelperLine(),
+    ];
   }
   isFull() {
     return !!this.maxItems && this.value.length >= this.maxItems;
@@ -477,6 +500,23 @@ export class ChipSet {
       "attribute": "label",
       "reflect": true
     },
+    "helperText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optional helper text to display below the chipset.\nWhen type is `input`, the helper text is displayed below the\ninput field when it has focus.\nWhen type is not `input`, the helper text is always displayed\nif the device is touch screen; otherwise it is shown when chip-set\nis hovered or focused using keyboard navigation."
+      },
+      "attribute": "helper-text",
+      "reflect": true
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

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

@@ -348,6 +348,9 @@ div.CodeMirror-dragcursors {
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
 
+/**
+ * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
+ */
 :host {
   display: flex;
   font-size: 1rem;
@@ -478,6 +481,10 @@ span.CodeMirror-selectedtext { background: none; }
   color: rgb(var(--code-editor-neutral-text-color));
   background-color: rgb(var(--code-editor-background-color));
   border-radius: 0.25rem;
+  height: auto;
+}
+.cm-s-lime .CodeMirror-scroll {
+  max-height: var(--code-editor-max-height, 10rem);
 }
 .cm-s-lime.CodeMirror-focused div.CodeMirror-selected {
   background: rgba(var(--code-editor-selection-highlight-color), 0.15);