@limetech/lime-elements 36.3.1-next.1 → 36.3.1-next.2

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

@@ -34,24 +34,14 @@ 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.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
     };
-    this.renderHelperText = () => {
-      if (!this.hasHelperText()) {
+    this.renderHelperLine = () => {
+      if (!this.maxItems && !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;
+      return (h("limel-helper-line", { length: this.value.length, maxLength: this.maxItems, helperText: this.helperText, invalid: this.isInvalid() }));
     };
     this.clearAllChipsLabel = () => {
       return translate.get('chip-set.clear-all', this.language);

package/dist/collection/components/helper-line/helper-line.css

@@ -0,0 +1,30 @@
+:host(limel-helper-line) {
+  transition: opacity 0.2s ease;
+  box-sizing: border-box;
+  display: none;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.125rem 1rem 0 1rem;
+  min-width: 0;
+  font-family: Roboto, sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.0333333333em;
+  line-height: normal;
+  color: rgb(var(--contrast-1200));
+}
+
+:host(limel-helper-line.show) {
+  display: flex;
+}
+
+:host(limel-helper-line.invalid) .helper-text {
+  color: var(--mdc-theme-error);
+}
+
+.counter {
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/dist/collection/components/helper-line/helper-line.js

@@ -0,0 +1,167 @@
+import { Host, h } from '@stencil/core';
+/**
+ * This is an internal and private component that many input fields
+ * use to display a helper text, along with a character counter below the
+ * input field.
+ *
+ * We created this to keep the visual styles the same everywhere
+ * and to avoid importing styles separately.
+ *
+ * Also this enables us to open the helper line in limel-portal,
+ * more easily without having to send the styles to the portal.
+ *
+ * :::note
+ * When the component has no content, it will get a `display: none`
+ * as styles to avoid creating empty holes in the UI of the parent component.
+ * For example, in a `flex` or `grid` component that has a `gap`,
+ * we don't want the empty `limel-helper-line` to render and cause unnecessary
+ * gaps in the UI.
+ * However, to be more resourceful, the parent component can choose not
+ * to render the helper-line as well.
+ * :::
+ *
+ * @exampleComponent limel-example-helper-line
+ * @exampleComponent limel-example-helper-line-invalid
+ * @exampleComponent limel-example-helper-line-long-text
+ * @exampleComponent limel-example-helper-line-long-text-no-counter
+ * @exampleComponent limel-example-helper-line-character-counter
+ * @private
+ */
+export class HelperLine {
+  constructor() {
+    this.hasContent = () => {
+      if (this.maxLength ||
+        this.helperText.length > 0 ||
+        this.helperText !== null ||
+        this.helperText !== undefined) {
+        return true;
+      }
+    };
+    this.renderHelperText = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
+    };
+    this.renderCharacterCounter = () => {
+      const counter = `${this.length} / ${this.maxLength}`;
+      if (!this.maxLength) {
+        return;
+      }
+      return h("span", { class: "counter" }, counter);
+    };
+    this.helperText = undefined;
+    this.length = undefined;
+    this.maxLength = undefined;
+    this.invalid = false;
+    this.helperTextId = undefined;
+  }
+  render() {
+    return (h(Host, { tabIndex: -1, class: {
+        invalid: this.invalid,
+        show: this.hasContent(),
+      }, "aria-hidden": !this.hasContent() }, this.renderHelperText(), this.renderCharacterCounter()));
+  }
+  static get is() { return "limel-helper-line"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["helper-line.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["helper-line.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The helper text that is displayed on the left side."
+        },
+        "attribute": "helper-text",
+        "reflect": true
+      },
+      "length": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Length of the current input value, coming from the parent component.\nUsed in the character counter section on the right side."
+        },
+        "attribute": "length",
+        "reflect": true
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Maximum length of the characters, defined on the parent component.\nUsed in the character counter section on the right side."
+        },
+        "attribute": "max-length",
+        "reflect": true
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Turns `true`, when the parent component is invalid.\nFor example, when the parent component is `required` but is left empty.\nOr when the input format is invalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "helperTextId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Used by `aria-controls` and `aria-describedby` in the parent component."
+        },
+        "attribute": "helper-text-id",
+        "reflect": true
+      }
+    };
+  }
+}

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

@@ -2016,6 +2016,9 @@
   z-index: 2;
 }
 
+:not(.mdc-text-field--focused):not(.mdc-text-field--invalid) + limel-helper-line {
+  opacity: 0;
+}
 :not(.mdc-text-field--focused):not(.mdc-text-field--invalid) .mdc-text-field__input[type=number] {
   color: transparent;
   -webkit-text-fill-color: transparent;
@@ -2078,21 +2081,6 @@ input.mdc-text-field__input::-webkit-search-cancel-button:active {
   transform: none;
 }
 
-.mdc-text-field-character-counter {
-  transition: opacity 0.2s ease;
-  opacity: 0;
-}
-.mdc-text-field--focused + .mdc-text-field-helper-line .mdc-text-field-character-counter {
-  opacity: 1;
-}
-.mdc-text-field-character-counter:before {
-  height: 0.75rem;
-}
-
-.mdc-text-field-helper-text:before {
-  height: 0.75rem;
-}
-
 /*
  * This file is imported into every component!
  *

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

@@ -111,26 +111,18 @@ export class InputField {
       this.isModified = true;
     };
     this.renderHelperLine = () => {
+      const text = this.value || '';
+      const length = text.length;
       if (!this.maxlength && !this.hasHelperText()) {
         return;
       }
-      return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" }, this.renderHelperText(), this.renderCharacterCounter()));
+      return (h("limel-helper-line", { helperTextId: helperTextId, helperText: this.helperText, length: length, maxLength: this.maxlength, invalid: this.isInvalid() }));
     };
     this.renderEmptyValueForReadonly = () => {
       if (this.readonly && !this.value) {
         return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
       }
     };
-    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, id: helperTextId }, this.helperText));
-    };
     this.hasHelperText = () => {
       return this.helperText !== null && this.helperText !== undefined;
     };
@@ -160,14 +152,6 @@ export class InputField {
     this.hasPrefix = () => {
       return this.prefix !== null && this.prefix !== undefined;
     };
-    this.renderCharacterCounter = () => {
-      if (!this.maxlength || this.type === 'number') {
-        return;
-      }
-      const text = this.value || '';
-      const label = `${text.length} / ${this.maxlength}`;
-      return h("div", { class: "mdc-text-field-character-counter" }, label);
-    };
     this.isInvalid = () => {
       if (this.readonly) {
         // A readonly field can never be invalid.

package/dist/collection/components/list/list.css

@@ -823,105 +823,21 @@
   color: var(--lime-error-text-color);
 }
 
-/*
- * 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 that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
-.limel-checkbox-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
-}
-
-.limel-checkbox-helper-text {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+limel-helper-line {
   opacity: 0;
-  color: rgba(var(--contrast-1200), 1);
-}
-:host(:hover) .limel-checkbox-helper-text, :host(:focus) .limel-checkbox-helper-text, :host(:focus-within) .limel-checkbox-helper-text {
-  opacity: 1;
 }
 
 @media (pointer: coarse) {
-  .limel-checkbox-helper-text {
+  limel-helper-line {
     opacity: 1;
   }
 }
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
+}
+
 .lime-checkbox--readonly.mdc-checkbox--disabled {
   opacity: 1;
   --mdc-ripple-press-opacity: 1;
@@ -5289,105 +5205,21 @@ a.mdc-list-item {
   color: var(--lime-error-text-color);
 }
 
-/*
- * 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 that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
-.limel-checkbox-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
-}
-
-.limel-checkbox-helper-text {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+limel-helper-line {
   opacity: 0;
-  color: rgba(var(--contrast-1200), 1);
-}
-:host(:hover) .limel-checkbox-helper-text, :host(:focus) .limel-checkbox-helper-text, :host(:focus-within) .limel-checkbox-helper-text {
-  opacity: 1;
 }
 
 @media (pointer: coarse) {
-  .limel-checkbox-helper-text {
+  limel-helper-line {
     opacity: 1;
   }
 }
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
+}
+
 .lime-checkbox--readonly.mdc-checkbox--disabled {
   opacity: 1;
   --mdc-ripple-press-opacity: 1;