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

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

@@ -0,0 +1,166 @@
+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/icon/icon.js

@@ -51,7 +51,6 @@ import iconCache from '../../global/icon-cache';
  * Search for an icon and **click on it to copy its name to clipboard**.
  *
  * <limel-example-icon-finder />
- *
  * @exampleComponent limel-example-icon
  * @exampleComponent limel-example-icon-background
  */
@@ -76,7 +75,6 @@ export class Icon {
   }
   /**
    * Load the SVG data for the icon from the icon cache
-   *
    * @param {string} name name of the icon
    * @returns {string} the icon SVG data
    */

package/dist/collection/components/info-tile/info-tile.js

@@ -7,7 +7,6 @@ import { h } from '@stencil/core';
  * If clicking on the component should navigate the user to
  * a new screen or web page, you need to provide a URL,
  * using the `link` property.
- *
  * @exampleComponent limel-example-info-tile
  * @exampleComponent limel-example-info-tile-badge
  * @exampleComponent limel-example-info-tile-progress

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.
@@ -294,7 +278,6 @@ export class InputField {
     /**
      * Key handler for the input field
      * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-     *
      * @param {KeyboardEvent} event event
      * @returns {void}
      */

package/dist/collection/components/list/list-renderer.js

@@ -12,7 +12,6 @@ export class ListRenderer {
      * and return the index at which that ListItem is located in `items`.
      * Returns `undefined` if no item should have the attribute set.
      * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
-     *
      * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
      * @returns {number} the index as per the description
      */
@@ -39,7 +38,6 @@ export class ListRenderer {
     };
     /**
      * Render a single list item
-     *
      * @param {ListItem | ListSeparator} item the item to render
      * @param {number} index the index the item had in the `items` array
      * @returns {HTMLElement} the list item
@@ -69,7 +67,6 @@ export class ListRenderer {
     };
     /**
      * Render the text of the list item
-     *
      * @param {ListItem} item the list item
      * @returns {HTMLElement | string} the text for the list item
      */
@@ -84,7 +81,6 @@ export class ListRenderer {
     };
     /**
      * Render an icon for a list item
-     *
      * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
      * @param {ListItem} item the list item
      * @returns {HTMLElement} the icon element

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;

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -10,7 +10,6 @@ export class MenuListRenderer {
      * and return the index at which that MenuItem is located in `items`.
      * Returns `undefined` if no item should have the attribute set.
      * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
-     *
      * @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
      * @returns {number} the index as per the description
      */
@@ -37,7 +36,6 @@ export class MenuListRenderer {
     };
     /**
      * Render a single list item
-     *
      * @param {MenuItem | ListSeparator} item the item to render
      * @param {number} index the index the item had in the `items` array
      * @returns {HTMLElement} the list item
@@ -59,7 +57,6 @@ export class MenuListRenderer {
     };
     /**
      * Render the text of the list item
-     *
      * @param {MenuItem} item the list item
      * @returns {HTMLElement | string} the text for the list item
      */
@@ -83,7 +80,6 @@ export class MenuListRenderer {
     };
     /**
      * Render an icon for a list item
-     *
      * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function
      * @param {MenuItem} item the list item
      * @returns {HTMLElement} the icon element