@limetech/lime-elements 37.59.1 → 37.60.1

package/dist/collection/components/linear-progress/linear-progress.css

@@ -67,272 +67,80 @@
 /**
  * @prop --background-color: Color to use for progress-bar track.
  */
-@keyframes mdc-linear-progress-primary-indeterminate-translate {
-  0% {
-    transform: translateX(0);
-  }
-  20% {
-    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    transform: translateX(0);
-  }
-  59.15% {
-    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    transform: translateX(83.67142%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-primary-half, 83.67142%));
-  }
-  100% {
-    transform: translateX(200.611057%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-primary-full, 200.611057%));
-  }
+:host(limel-linear-progress) {
+  isolation: isolate;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+  height: 0.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--background-color, rgb(var(--contrast-800), 0.5));
 }
-@keyframes mdc-linear-progress-primary-indeterminate-scale {
-  0% {
-    transform: scaleX(0.08);
-  }
-  36.65% {
-    animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
-    transform: scaleX(0.08);
-  }
-  69.15% {
-    animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
-    transform: scaleX(0.661479);
-  }
-  100% {
-    transform: scaleX(0.08);
-  }
+
+.progress {
+  height: 100%;
+  width: var(--percentage, 0%);
+  border-radius: 0.25rem;
+  background-color: var(--mdc-theme-primary);
 }
-@keyframes mdc-linear-progress-secondary-indeterminate-translate {
-  0% {
-    animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-    transform: translateX(0);
-  }
-  25% {
-    animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-    transform: translateX(37.651913%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
-  }
-  48.35% {
-    animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-    transform: translateX(84.386165%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-secondary-half, 84.386165%));
-  }
-  100% {
-    transform: translateX(160.277782%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-secondary-full, 160.277782%));
-  }
+
+:host(limel-linear-progress[indeterminate]) .progress {
+  background-color: transparent;
+  width: 100%;
 }
-@keyframes mdc-linear-progress-secondary-indeterminate-scale {
-  0% {
-    animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
-    transform: scaleX(0.08);
-  }
-  19.15% {
-    animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
-    transform: scaleX(0.457104);
-  }
-  44.15% {
-    animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
-    transform: scaleX(0.72796);
-  }
-  100% {
-    transform: scaleX(0.08);
-  }
+:host(limel-linear-progress[indeterminate]) .progress:before, :host(limel-linear-progress[indeterminate]) .progress:after {
+  will-change: left, right, opacity;
+  content: "";
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  border-radius: 0.25rem;
+  opacity: 0;
+  background-color: var(--mdc-theme-primary);
 }
-@keyframes mdc-linear-progress-buffering {
-  from {
-    transform: rotate(180deg) translateX(-10px);
-  }
+:host(limel-linear-progress[indeterminate]) .progress:before {
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+:host(limel-linear-progress[indeterminate]) .progress:after {
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s;
 }
-@keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
+
+@keyframes indeterminate {
   0% {
-    transform: translateX(0);
+    left: -35%;
+    right: 100%;
+    opacity: 0;
   }
-  20% {
-    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    transform: translateX(0);
+  10%, 80% {
+    opacity: 1;
   }
-  59.15% {
-    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    transform: translateX(-83.67142%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
+  60% {
+    left: 100%;
+    right: -90%;
   }
   100% {
-    transform: translateX(-200.611057%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
+    left: 100%;
+    right: -90%;
+    opacity: 0;
   }
 }
-@keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
+@keyframes indeterminate-short {
   0% {
-    animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-    transform: translateX(0);
+    left: -200%;
+    right: 100%;
+    opacity: 0;
   }
-  25% {
-    animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-    transform: translateX(-37.651913%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
+  10%, 80% {
+    opacity: 1;
   }
-  48.35% {
-    animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-    transform: translateX(-84.386165%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
+  60% {
+    left: 107%;
+    right: -8%;
   }
   100% {
-    transform: translateX(-160.277782%);
-    /* @alternate */
-    transform: translateX(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
+    left: 107%;
+    right: -8%;
+    opacity: 0;
   }
-}
-@keyframes mdc-linear-progress-buffering-reverse {
-  from {
-    transform: translateX(-10px);
-  }
-}
-.mdc-linear-progress {
-  position: relative;
-  width: 100%;
-  height: 4px;
-  transform: translateZ(0);
-  outline: 1px solid transparent;
-  overflow: hidden;
-  transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.mdc-linear-progress__bar {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  animation: none;
-  transform-origin: top left;
-  transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.mdc-linear-progress__bar-inner {
-  display: inline-block;
-  position: absolute;
-  width: 100%;
-  animation: none;
-  border-top: 4px solid;
-}
-.mdc-linear-progress__buffer {
-  display: flex;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.mdc-linear-progress__buffer-dots {
-  background-repeat: repeat-x;
-  background-size: 10px 4px;
-  flex: auto;
-  transform: rotate(180deg);
-  animation: mdc-linear-progress-buffering 250ms infinite linear;
-}
-.mdc-linear-progress__buffer-bar {
-  flex: 0 1 100%;
-  transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.mdc-linear-progress__primary-bar {
-  transform: scaleX(0);
-}
-.mdc-linear-progress__secondary-bar {
-  display: none;
-}
-.mdc-linear-progress--indeterminate .mdc-linear-progress__bar {
-  transition: none;
-}
-.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
-  left: -145.166611%;
-}
-.mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar {
-  left: -54.888891%;
-  display: block;
-}
-.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar {
-  animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite linear;
-}
-.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar > .mdc-linear-progress__bar-inner {
-  animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite linear;
-}
-.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar {
-  animation: mdc-linear-progress-secondary-indeterminate-translate 2s infinite linear;
-}
-.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar > .mdc-linear-progress__bar-inner {
-  animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
-}
-[dir=rtl] .mdc-linear-progress, .mdc-linear-progress[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /*rtl:end:ignore*/
-}
-[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__bar {
-  /* @noflip */ /*rtl:ignore*/
-  right: 0;
-  /* @noflip */ /*rtl:ignore*/
-  -webkit-transform-origin: center right;
-  /* @noflip */ /*rtl:ignore*/
-  transform-origin: center right;
-}
-[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar {
-  animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
-}
-[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar {
-  animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
-}
-[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__buffer-dots, .mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__buffer-dots {
-  animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
-  transform: rotate(0);
-}
-[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
-  /* @noflip */ /*rtl:ignore*/
-  right: -145.166611%;
-  /* @noflip */ /*rtl:ignore*/
-  left: auto;
-}
-[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar {
-  /* @noflip */ /*rtl:ignore*/
-  right: -54.888891%;
-  /* @noflip */ /*rtl:ignore*/
-  left: auto;
-}
-
-.mdc-linear-progress--closed {
-  opacity: 0;
-}
-.mdc-linear-progress--closed-animation-off .mdc-linear-progress__buffer-dots {
-  animation: none;
-}
-.mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar,
-.mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar .mdc-linear-progress__bar-inner {
-  animation: none;
-}
-
-.mdc-linear-progress__bar-inner {
-  border-color: #26a69a;
-  /* @alternate */
-  border-color: var(--mdc-theme-primary, #26a69a);
-}
-
-.mdc-linear-progress__buffer-dots {
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E");
-}
-
-.mdc-linear-progress__buffer-bar {
-  background-color: #e6e6e6;
-}
-
-.mdc-linear-progress {
-  text-align: left;
-}
-
-.mdc-linear-progress__buffer-dots {
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='var(--background-color, rgba(var(--contrast-800), 0.5))'/%3E%3C/svg%3E");
-}
-
-.mdc-linear-progress__buffer-bar {
-  background-color: var(--background-color, rgba(var(--contrast-800), 0.5));
 }

package/dist/collection/components/linear-progress/linear-progress.js

@@ -1,49 +1,42 @@
-import { MDCLinearProgress } from '@material/linear-progress';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
+import translate from '../../global/translations';
+const PERCENT = 100;
 /**
+ * The linear progress component can be used to visualize the current state of a progress in a scale;
+ * for example percentage of completion of a task.
+ *
  * @exampleComponent limel-example-linear-progress
- * @exampleComponent limel-example-linear-progress-color
  * @exampleComponent limel-example-linear-progress-indeterminate
+ * @exampleComponent limel-example-linear-progress-accessible-label
+ * @exampleComponent limel-example-linear-progress-color
  */
 export class LinearProgress {
   constructor() {
+    this.language = 'en';
     this.value = 0;
     this.indeterminate = false;
-  }
-  connectedCallback() {
-    this.initialize();
-  }
-  componentDidLoad() {
-    this.initialize();
-  }
-  initialize() {
-    const element = this.host.shadowRoot.querySelector('.mdc-linear-progress');
-    if (!element) {
-      return;
-    }
-    this.mdcLinearProgress = new MDCLinearProgress(element);
-    this.mdcLinearProgress.progress = this.value;
-  }
-  disconnectedCallback() {
-    if (this.mdcLinearProgress) {
-      this.mdcLinearProgress.destroy();
-    }
+    this.accessibleLabel = undefined;
   }
   render() {
     if (!this.isFinite(this.value)) {
       return;
     }
-    const classList = {
-      'mdc-linear-progress': true,
-      'mdc-linear-progress--indeterminate': this.indeterminate,
-    };
-    return (h("div", { role: "progressbar", class: classList, "aria-label": "Progress Bar", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": this.value }, h("div", { class: "mdc-linear-progress__buffer" }, h("div", { class: "mdc-linear-progress__buffer-bar" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__primary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" }))));
+    const loadingText = translate.get('loading', this.language);
+    const ariaLabel = translate.get('progress-bar', this.language);
+    const ariaValueNow = this.indeterminate ? undefined : this.value;
+    const ariaValueText = this.indeterminate ? loadingText : undefined;
+    return (h(Host, { role: "progressbar", "aria-label": this.accessibleLabel || ariaLabel, "aria-live": "polite", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": ariaValueNow, "aria-valuetext": ariaValueText, style: { '--percentage': `${this.value * PERCENT}%` } }, h("div", { class: "progress" })));
   }
   watchValue(newValue) {
-    if (!this.mdcLinearProgress || !this.isFinite(newValue)) {
+    if (!this.isFinite(newValue)) {
       return;
     }
-    this.mdcLinearProgress.progress = newValue;
+    this.updateProgress(newValue);
+  }
+  updateProgress(value) {
+    if (this.host) {
+      this.host.style.setProperty('--percentage', `${value * PERCENT}%`);
+    }
   }
   isFinite(value) {
     return Number.isFinite(value);
@@ -62,6 +55,29 @@ export class LinearProgress {
   }
   static get properties() {
     return {
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "../date-picker/date.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the language for translations.\nWill translate the translatable strings on the components."
+        },
+        "attribute": "language",
+        "reflect": true,
+        "defaultValue": "'en'"
+      },
       "value": {
         "type": "number",
         "mutable": false,
@@ -97,6 +113,23 @@ export class LinearProgress {
         "attribute": "indeterminate",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A label used to describe the purpose of the element to users\nof assistive technologies, like screen readers.\nIf not provided, the generic word of \"Progress bar\" will be used."
+        },
+        "attribute": "accessible-label",
+        "reflect": true
       }
     };
   }

package/dist/collection/components/linear-progress/linear-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/linear-progress/linear-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAMH,MAAM,OAAO,cAAc;;iBAKA,CAAC;yBAMQ,KAAK;;EAO9B,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,sBAAsB,CACzB,CAAC;IACF,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACxD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;EACjD,CAAC;EAEM,oBAAoB;IACvB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;KACpC;EACL,CAAC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MAC5B,OAAO;KACV;IAED,MAAM,SAAS,GAAG;MACd,qBAAqB,EAAE,IAAI;MAC3B,oCAAoC,EAAE,IAAI,CAAC,aAAa;KAC3D,CAAC;IAEF,OAAO,CACH,WACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,cAAc,mBACX,GAAG,mBACH,GAAG,mBACF,IAAI,CAAC,KAAK;MAEzB,WAAK,KAAK,EAAC,6BAA6B;QACpC,WAAK,KAAK,EAAC,iCAAiC,GAAO,CACjD;MACN,WAAK,KAAK,EAAC,2DAA2D;QAClE,YAAM,KAAK,EAAC,gCAAgC,GAAG,CAC7C;MACN,WAAK,KAAK,EAAC,6DAA6D;QACpE,YAAM,KAAK,EAAC,gCAAgC,GAAG,CAC7C,CACJ,CACT,CAAC;EACN,CAAC;EAGS,UAAU,CAAC,QAAQ;IACzB,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MACrD,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC/C,CAAC;EAEO,QAAQ,CAAC,KAAc;IAC3B,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { MDCLinearProgress } from '@material/linear-progress';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-linear-progress\n * @exampleComponent limel-example-linear-progress-color\n * @exampleComponent limel-example-linear-progress-indeterminate\n */\n@Component({\n    tag: 'limel-linear-progress',\n    shadow: true,\n    styleUrl: 'linear-progress.scss',\n})\nexport class LinearProgress {\n    /**\n     * The value of the progress bar. Should be between `0` and `1`.\n     */\n    @Prop({ reflect: true })\n    public value: number = 0;\n\n    /**\n     * Puts the progress bar in an indeterminate state\n     */\n    @Prop({ reflect: true })\n    public indeterminate: boolean = false;\n\n    @Element()\n    private host: HTMLLimelLinearProgressElement;\n\n    private mdcLinearProgress: MDCLinearProgress;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-linear-progress',\n        );\n        if (!element) {\n            return;\n        }\n\n        this.mdcLinearProgress = new MDCLinearProgress(element);\n        this.mdcLinearProgress.progress = this.value;\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcLinearProgress) {\n            this.mdcLinearProgress.destroy();\n        }\n    }\n\n    public render() {\n        if (!this.isFinite(this.value)) {\n            return;\n        }\n\n        const classList = {\n            'mdc-linear-progress': true,\n            'mdc-linear-progress--indeterminate': this.indeterminate,\n        };\n\n        return (\n            <div\n                role=\"progressbar\"\n                class={classList}\n                aria-label=\"Progress Bar\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"1\"\n                aria-valuenow={this.value}\n            >\n                <div class=\"mdc-linear-progress__buffer\">\n                    <div class=\"mdc-linear-progress__buffer-bar\"></div>\n                </div>\n                <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n                    <span class=\"mdc-linear-progress__bar-inner\" />\n                </div>\n                <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n                    <span class=\"mdc-linear-progress__bar-inner\" />\n                </div>\n            </div>\n        );\n    }\n\n    @Watch('value')\n    protected watchValue(newValue) {\n        if (!this.mdcLinearProgress || !this.isFinite(newValue)) {\n            return;\n        }\n\n        this.mdcLinearProgress.progress = newValue;\n    }\n\n    private isFinite(value: unknown) {\n        return Number.isFinite(value);\n    }\n}\n"]}
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/linear-progress/linear-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAElD,MAAM,OAAO,GAAG,GAAG,CAAC;AAEpB;;;;;;;;GAQG;AAMH,MAAM,OAAO,cAAc;;oBAMM,IAAI;iBAMV,CAAC;yBAMQ,KAAK;;;EAa9B,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MAC5B,OAAO;KACV;IAED,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACjE,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,OAAO,CACH,EAAC,IAAI,IACD,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,eAAe,IAAI,SAAS,eACnC,QAAQ,mBACJ,GAAG,mBACH,GAAG,mBACF,YAAY,oBACX,aAAa,EAC7B,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE;MAErD,WAAK,KAAK,EAAC,UAAU,GAAG,CACrB,CACV,CAAC;EACN,CAAC;EAGS,UAAU,CAAC,QAAgB;IACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAC1B,OAAO;KACV;IAED,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;EAClC,CAAC;EAEO,cAAc,CAAC,KAAa;IAChC,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;KACtE;EACL,CAAC;EAEO,QAAQ,CAAC,KAAc;IAC3B,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\n\nconst PERCENT = 100;\n\n/**\n * The linear progress component can be used to visualize the current state of a progress in a scale;\n * for example percentage of completion of a task.\n *\n * @exampleComponent limel-example-linear-progress\n * @exampleComponent limel-example-linear-progress-indeterminate\n * @exampleComponent limel-example-linear-progress-accessible-label\n * @exampleComponent limel-example-linear-progress-color\n */\n@Component({\n    tag: 'limel-linear-progress',\n    shadow: true,\n    styleUrl: 'linear-progress.scss',\n})\nexport class LinearProgress {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * The value of the progress bar. Should be between `0` and `1`.\n     */\n    @Prop({ reflect: true })\n    public value: number = 0;\n\n    /**\n     * Puts the progress bar in an indeterminate state\n     */\n    @Prop({ reflect: true })\n    public indeterminate: boolean = false;\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * If not provided, the generic word of \"Progress bar\" will be used.\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    @Element()\n    private host: HTMLLimelLinearProgressElement;\n\n    public render() {\n        if (!this.isFinite(this.value)) {\n            return;\n        }\n\n        const loadingText = translate.get('loading', this.language);\n        const ariaLabel = translate.get('progress-bar', this.language);\n        const ariaValueNow = this.indeterminate ? undefined : this.value;\n        const ariaValueText = this.indeterminate ? loadingText : undefined;\n\n        return (\n            <Host\n                role=\"progressbar\"\n                aria-label={this.accessibleLabel || ariaLabel}\n                aria-live=\"polite\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"1\"\n                aria-valuenow={ariaValueNow}\n                aria-valuetext={ariaValueText}\n                style={{ '--percentage': `${this.value * PERCENT}%` }}\n            >\n                <div class=\"progress\" />\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected watchValue(newValue: number) {\n        if (!this.isFinite(newValue)) {\n            return;\n        }\n\n        this.updateProgress(newValue);\n    }\n\n    private updateProgress(value: number): void {\n        if (this.host) {\n            this.host.style.setProperty('--percentage', `${value * PERCENT}%`);\n        }\n    }\n\n    private isFinite(value: unknown) {\n        return Number.isFinite(value);\n    }\n}\n"]}

package/dist/collection/components/table/table.js

@@ -126,13 +126,13 @@ export class Table {
     this.formatRows();
   }
   updateData(newData = [], oldData = []) {
-    this.pool.releaseAll();
     const shouldReplace = this.shouldReplaceData(newData, oldData);
     setTimeout(() => {
       if (!this.tabulator) {
         return;
       }
       if (shouldReplace) {
+        this.pool.releaseAll();
         this.tabulator.replaceData(newData);
         this.setSelection();
         return;