@vaadin/vaadin-progress-bar - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0-alpha1

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-progress-bar",
-  "version": "1.1.2",
+  "version": "1.2.0-alpha1",
   "main": "vaadin-progress-bar.js",
@@ -17,0 +17,0 @@ "author": "Vaadin Ltd",

src/vaadin-progress-bar.js

@@ -72,2 +72,7 @@ /**
 
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="value"] {
+        transform-origin: 100% 50%;
+      }
     </style>
@@ -86,3 +91,3 @@
   static get version() {
-    return '1.1.2';
+    return '1.2.0-alpha1';
   }
@@ -89,0 +94,0 @@ }

theme/lumo/vaadin-progress-bar-styles.js

@@ -126,2 +126,72 @@ import '@polymer/polymer/lib/elements/custom-style.js';
       }
+
+      /* RTL specific styles */
+
+      :host([indeterminate][dir="rtl"]) [part="value"] {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
+        animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(.355, .045, .645, 1);
+      }
+
+      :host(:not([aria-valuenow])[dir="rtl"]) [part="value"]::before,
+      :host([indeterminate][dir="rtl"]) [part="value"]::before {
+        animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.355, .045, .645, 1);
+      }
+
+      @keyframes vaadin-progress-indeterminate-rtl {
+        0% {
+          transform: scaleX(0.015);
+          transform-origin: 100% 0%;
+        }
+
+        25% {
+          transform: scaleX(0.4);
+        }
+
+        50% {
+          transform: scaleX(0.015);
+          transform-origin: 0% 0%;
+          background-image: var(--lumo-progress-indeterminate-progress-bar-background);
+        }
+
+        50.1% {
+          transform: scaleX(0.015);
+          transform-origin: 0% 0%;
+          background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+        }
+
+        75% {
+          transform: scaleX(0.4);
+        }
+
+        100% {
+          transform: scaleX(0.015);
+          transform-origin: 100% 0%;
+          background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+        }
+      }
+
+      /* Contrast color */
+
+      :host([theme~="contrast"][dir="rtl"]) [part="value"],
+      :host([theme~="contrast"][dir="rtl"]) [part="value"]::before {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct));
+      }
+
+      /* Error color */
+
+      :host([theme~="error"][dir="rtl"]) [part="value"],
+      :host([theme~="error"][dir="rtl"]) [part="value"]::before {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
+      }
+
+      /* Primary color */
+
+      :host([theme~="success"][dir="rtl"]) [part="value"],
+      :host([theme~="success"][dir="rtl"]) [part="value"]::before {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
+      }
     </style>
@@ -128,0 +198,0 @@ </template>

theme/material/vaadin-progress-bar-styles.js

@@ -86,2 +86,33 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="bar"] {
+        transform-origin: 100% 0;
+      }
+
+      :host([indeterminate][dir="rtl"]) [part="bar"] {
+        left: auto;
+        right: -100%;
+        animation: primary-indeterminate-translate-rtl 2s infinite linear;
+      }
+
+      @keyframes primary-indeterminate-translate-rtl {
+        0% {
+          transform: translateX(0);
+        }
+
+        20% {
+          animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+          transform: translateX(0);
+        }
+
+        59.15% {
+          animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+          transform: translateX(-83.67142%);
+        }
+
+        100% {
+          transform: translateX(-200.611057%);
+        }
+      }
     </style>
@@ -88,0 +119,0 @@ </template>

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33287

increased by13.39%

Lines of code

454

increased by22.7%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes