@limetech/lime-elements 36.1.0-next.8 → 36.1.0

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

@@ -0,0 +1,294 @@
+import { h } from '@stencil/core';
+/**
+ * This component can be used on places such as a start page or a dashboard.
+ * It offers features for visualizing aggregated data along with supplementary
+ * information.
+ *
+ * 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
+ * @exampleComponent limel-example-info-tile-loading
+ * @exampleComponent limel-example-info-tile-styling
+ */
+export class InfoTile {
+  constructor() {
+    this.renderPrefix = () => {
+      if (this.prefix) {
+        return h("span", { class: "prefix" }, this.prefix);
+      }
+    };
+    this.renderValue = () => {
+      const characterCount = this.value.toString().length;
+      if (this.value) {
+        return (h("span", { class: {
+            value: true,
+            [`ch-${characterCount}`]: true,
+          } }, this.value));
+      }
+    };
+    this.renderSuffix = () => {
+      if (this.suffix) {
+        return h("span", { class: "suffix" }, this.suffix);
+      }
+    };
+    this.renderIcon = () => {
+      if (this.icon) {
+        return h("limel-icon", { class: "icon", name: this.icon });
+      }
+    };
+    this.renderProgress = () => {
+      var _a, _b;
+      if (((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) === 0) {
+        return (h("limel-circular-progress", { class: "progress", prefix: this.progress.prefix, value: this.progress.value, suffix: this.progress.suffix, maxValue: this.progress.maxValue, displayPercentageColors: this.progress.displayPercentageColors }));
+      }
+    };
+    this.renderLabel = () => {
+      if (this.label) {
+        return h("span", { class: "label" }, this.label);
+      }
+    };
+    this.renderNotification = () => {
+      if (this.badge) {
+        return h("limel-badge", { label: this.badge });
+      }
+    };
+    this.renderSpinner = () => {
+      if (this.loading) {
+        return h("limel-linear-progress", { indeterminate: true });
+      }
+    };
+    this.value = undefined;
+    this.icon = undefined;
+    this.label = null;
+    this.prefix = undefined;
+    this.suffix = undefined;
+    this.disabled = false;
+    this.badge = undefined;
+    this.loading = false;
+    this.link = undefined;
+    this.progress = undefined;
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
+      this.value +
+      ' ' +
+      this.checkProps(this === null || this === void 0 ? void 0 : this.suffix) +
+      this.checkProps(this === null || this === void 0 ? void 0 : this.label) +
+      '. ' +
+      this.checkProps((_a = this === null || this === void 0 ? void 0 : this.progress) === null || _a === void 0 ? void 0 : _a.prefix) +
+      this.checkProps((_b = this === null || this === void 0 ? void 0 : this.progress) === null || _b === void 0 ? void 0 : _b.value) +
+      this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
+      this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
+    const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
+    return [
+      h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, class: {
+          'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
+          'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) || ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
+        } }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()),
+      this.renderNotification(),
+    ];
+  }
+  checkProps(propValue) {
+    return !propValue ? '' : propValue + ' ';
+  }
+  static get is() { return "limel-info-tile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["info-tile.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["info-tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A piece of text or number that is the main piece of information\nwhich the component is intended to visualize."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Name of icon for the info tile."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The text to show below the info tile. Long labels will be truncated."
+        },
+        "attribute": "label",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "prefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A string of text that is visually placed before the value."
+        },
+        "attribute": "prefix",
+        "reflect": true
+      },
+      "suffix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A string of text that is visually placed after the value."
+        },
+        "attribute": "suffix",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` if info tile is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "badge": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If supplied, the info tile will display a notification badge."
+        },
+        "attribute": "badge",
+        "reflect": true
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to put the component in the `loading` state.\nThis does _not_ disable the link. To do so, the\n`disabled` property should be set to `true` as well."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "link": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Link",
+          "resolved": "Link",
+          "references": {
+            "Link": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If supplied, the info tile will be a clickable link.\n\nSupplying a value also adds an elevated effect using a shadow,\nas well as `cursor: pointer`, which appears on hover.\nWhile we strongly recommend supplying a link whenever the\ncomponent should act as a link, if this is not possible, and\nyou need to provide interaction through a click handler,\nyou can still get the correct styling by supplying a `Link`\nobject with the `href` property set to `'#'`."
+        }
+      },
+      "progress": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "InfoTileProgress",
+          "resolved": "InfoTileProgress",
+          "references": {
+            "InfoTileProgress": {
+              "location": "import",
+              "path": "./info-tile.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Properties of the optional circular progress bar.\n\nDefaults:\n- `maxValue`: 100\n- `suffix`: %\n- `percentageColors`: false\n\nColors change with intervals of 10 %."
+        }
+      }
+    };
+  }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -2167,6 +2167,9 @@
   color: transparent;
   -webkit-text-fill-color: transparent;
 }
+:not(.mdc-text-field--focused):not(.mdc-text-field--invalid).lime-text-field--readonly .mdc-text-field__input[type=number] {
+  visibility: hidden;
+}
 
 .autocomplete-list-container {
   position: relative;