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

package/dist/collection/components/icon/icon.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import config from '../../global/config';
 import iconCache from '../../global/icon-cache';
 /**
@@ -56,6 +56,11 @@ import iconCache from '../../global/icon-cache';
  * @exampleComponent limel-example-icon-background
  */
 export class Icon {
+  constructor() {
+    this.size = undefined;
+    this.name = undefined;
+    this.badge = undefined;
+  }
   componentDidLoad() {
     this.loadIcon(this.name);
   }
@@ -92,73 +97,81 @@ export class Icon {
   }
   static get is() { return "limel-icon"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["icon.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "IconSize",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
-        "references": {
-          "IconSize": {
-            "location": "import",
-            "path": "./icon.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconSize",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
+          "references": {
+            "IconSize": {
+              "location": "import",
+              "path": "./icon.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Size of the icon"
-      },
-      "attribute": "size",
-      "reflect": true
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the icon"
+        },
+        "attribute": "size",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the icon"
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon"
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "name",
-      "reflect": true
-    },
-    "badge": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to give the icon a round background with some padding.\nOnly works when the `size` attribute is also set."
-      },
-      "attribute": "badge",
-      "reflect": true
-    }
-  }; }
+      "badge": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to give the icon a round background with some padding.\nOnly works when the `size` attribute is also set."
+        },
+        "attribute": "badge",
+        "reflect": true
+      }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "name",
-      "methodName": "loadIcon"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "name",
+        "methodName": "loadIcon"
+      }];
+  }
 }

package/dist/collection/components/icon-button/icon-button.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
@@ -8,14 +8,9 @@ import { Component, Element, h, Prop } from '@stencil/core';
  */
 export class IconButton {
   constructor() {
-    /**
-     * Set to `true` to give the button our standard "elevated" look, lifting
-     * it off the flat layout.
-     */
+    this.icon = undefined;
     this.elevated = false;
-    /**
-     * Set to `true` to disable the button.
-     */
+    this.label = undefined;
     this.disabled = false;
   }
   connectedCallback() {
@@ -35,88 +30,93 @@ export class IconButton {
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
-      h("limel-icon", { name: this.icon, badge: true })));
+    return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true })));
   }
   static get is() { return "limel-icon-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["icon-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["icon-button.css"]
-  }; }
-  static get properties() { return {
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon to display."
-      },
-      "attribute": "icon",
-      "reflect": true
-    },
-    "elevated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to give the button our standard \"elevated\" look, lifting\nit off the flat layout."
-      },
-      "attribute": "elevated",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The text to show to screenreaders and other assistive tech."
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon to display."
+        },
+        "attribute": "icon",
+        "reflect": true
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "elevated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to give the button our standard \"elevated\" look, lifting\nit off the flat layout."
+        },
+        "attribute": "elevated",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to disable the button."
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to show to screenreaders and other assistive tech."
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the button."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }

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;
+  }
+}