@limetech/lime-elements 36.1.0-dev.2 → 36.1.0-dev.4

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

@@ -0,0 +1,310 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/**
+* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
+* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`
+* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`
+* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`
+* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`
+* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`
+* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
+* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.
+* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.
+ * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.
+ * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.
+*/
+:host(limel-info-tile) {
+  --badge-text-color: var(
+      --info-tile-badge-text-color,
+      rgb(var(--color-white))
+  );
+  --badge-background-color: var(
+      --info-tile-badge-background-color,
+      rgb(var(--color-red-default))
+  );
+  --circular-progress-text-color: var(
+      --info-tile-progress-text-color,
+      var(--info-tile-text-color)
+  );
+  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);
+  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);
+  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);
+  --circular-progress-fill-color: var(--info-tile-progress-fill-color);
+  --circular-progress-background-color: var(
+      --info-tile-progress-background-color,
+      var(--info-tile-background-color)
+  );
+  --label-min-size: 0.75rem;
+  --label-preferred-size: 6cqw;
+  --label-max-size: 1rem;
+  --value-min-size: 1rem;
+  --value-preferred-size: 20cqw;
+  --value-max-size: 4rem;
+  --suffix-prefix-min-size: 0.75rem;
+  --suffix-prefix-preferred-size: 8cqw;
+  --suffix-prefix-max-size: 1.5rem;
+  --icon-min-size: 2rem;
+  --icon-preferred-size: 60cqh;
+  --icon-max-size: calc(100cqw - 0.5rem);
+  isolation: isolate;
+  container-type: size;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+:host(limel-info-tile) * {
+  box-sizing: border-box;
+}
+
+:host(limel-info-tile[disabled]) a {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+a {
+  all: unset;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+  padding: 0.25rem 1rem 0.5rem 1rem;
+  border-radius: var(--info-tile-border-radius, 1rem);
+  background-color: var(--info-tile-background-color, rgb(var(--contrast-100)));
+}
+a.is-clickable {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+  cursor: pointer;
+}
+a.is-clickable:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+a.is-clickable:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+a.is-clickable:focus {
+  outline: none;
+}
+a.is-clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+
+.icon {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  padding: 0.25rem;
+  display: flex;
+  justify-content: center;
+  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));
+  border-radius: 0;
+  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));
+}
+@supports not (container-type: size) {
+  .icon {
+    height: min(60%, var(--icon-max-size));
+  }
+}
+.has-circular-progress .icon {
+  top: unset;
+  bottom: 0.5rem;
+  --icon-min-size: 1.5rem;
+  --icon-preferred-size: 20cqh;
+}
+
+.progress {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  --circular-progress-size: min(
+      var(--icon-preferred-size),
+      var(--icon-max-size)
+  );
+}
+
+.label {
+  z-index: 1;
+  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
+  line-height: normal;
+  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));
+}
+@supports not (container-type: size) {
+  .label {
+    font-size: 0.875rem;
+  }
+}
+
+limel-badge {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+}
+
+limel-linear-progress {
+  --lime-primary-color: var(--info-tile-text-color);
+  position: absolute;
+  inset: auto 0 0 0;
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
+.value-group {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
+}
+
+.value-and-suffix,
+.label {
+  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));
+}
+
+.value-and-suffix {
+  display: flex;
+}
+
+.prefix,
+.suffix {
+  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));
+  opacity: 0.7;
+}
+@supports not (container-type: size) {
+  .prefix,
+.suffix {
+    font-size: 0.75rem;
+  }
+}
+
+.prefix {
+  align-self: flex-start;
+  line-height: normal;
+  transform: translateY(40%);
+}
+
+.value {
+  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);
+  transform-origin: left;
+  transform: translate3d(0, 0, 0) scale(1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: bold;
+  line-height: normal;
+  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));
+}
+@supports not (container-type: size) {
+  .value {
+    font-size: 2.5rem;
+  }
+}
+:host(limel-info-tile[loading]) .value {
+  opacity: 0.3;
+  transform: translate3d(0, 0, 0) scale(0.9);
+}
+
+.suffix {
+  transform: translateY(10%);
+}
+
+@container (width < 8rem) {
+  .progress {
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+
+  a {
+    padding: 0.375rem;
+    gap: 0.125rem;
+  }
+}
+@container (width < 18.75rem) {
+  .progress {
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+
+  .icon {
+    top: 0.25rem;
+    right: 0.5rem;
+  }
+  .has-circular-progress .icon {
+    right: 0.25rem;
+    bottom: 0.25rem;
+  }
+}
+@container (width < 40.5rem) {
+  .value {
+    --value-preferred-size: 13cqw;
+  }
+  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {
+    --value-preferred-size: 20cqw;
+  }
+  .value.ch-5 {
+    --value-preferred-size: 18cqw;
+  }
+  .value.ch-6 {
+    --value-preferred-size: 17cqw;
+  }
+  .value.ch-7 {
+    --value-preferred-size: 16cqw;
+  }
+  .value.ch-8 {
+    --value-preferred-size: 15cqw;
+  }
+  .value.ch-9 {
+    --value-preferred-size: 14cqw;
+  }
+}
+@container (height > 8rem) {
+  a {
+    padding-top: 0.75rem;
+    padding-bottom: 1rem;
+  }
+}
+@container (height < 8rem) and (width > 8rem) {
+  .value {
+    --value-preferred-size: 32cqh !important;
+  }
+
+  .suffix,
+.prefix {
+    --suffix-prefix-preferred-size: 16cqh !important;
+  }
+}
+@container (height > 18.75rem) {
+  .progress,
+.icon {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+
+  a {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .label {
+    text-align: center;
+  }
+
+  .has-circular-progress .icon {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    --icon-max-size: 3rem;
+  }
+}

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;