@dile/ui 2.22.1 → 2.23.1

package/components/spinner/index.js

@@ -1 +1,2 @@
-export { DileSpinner } from './src/DileSpinner.js';
+export { DileSpinner } from './src/DileSpinner.js';
+export { DileSpinnerBar } from './src/DileSpinnerBar.js';

package/components/spinner/spinner-bar.js

@@ -0,0 +1,3 @@
+import { DileSpinnerBar } from "./src/DileSpinnerBar.js";
+
+window.customElements.define("dile-spinner-bar", DileSpinnerBar);

package/components/spinner/src/DileSpinnerBar.js

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from 'lit';
+import { DileSpinnerMixin } from './DileSpinnerMixin.js';
+
+export class DileSpinnerBar extends DileSpinnerMixin(LitElement) {
+    static styles = [
+        css`
+            :host {
+                display: block;
+            }
+            .bar {
+                width: 100%;
+                height: var(--dile-spinner-bar-height, 4px);
+                border-radius: var(--dile-spinner-bar-border-radius, 0);
+                background: linear-gradient(
+                    90deg,
+                    var(--dile-spinner-bar-color-1, #1e3c72) 0%,
+                    var(--dile-spinner-bar-color-2, #00d4ff) 50%,
+                    var(--dile-spinner-bar-color-1, #1e3c72) 100%
+                );
+                background-size: 200% 100%;
+                animation: dile-bar-shimmer var(--dile-spinner-bar-animation-time, 1.8s) ease-in-out infinite;
+            }
+            @keyframes dile-bar-shimmer {
+                0% { background-position: 0% 50%; }
+                50% { background-position: 100% 50%; }
+                100% { background-position: 0% 50%; }
+            }
+        `
+    ];
+
+    render() {
+        return html`
+            ${this.active
+                ? html`<div class="bar"></div>`
+                : ''
+            }
+        `;
+    }
+}

package/components/toast/src/DileToastPersistent.js

@@ -24,6 +24,10 @@ export class DileToastPersistent extends DileOverlay(LitElement) {
         right: 0px;
         left: auto;
       }
+      :host([center]:not([right])) span {
+        left: 50%;
+        right: auto;
+      }
       #overlay {
         box-sizing: border-box;
         color: var(--dile-toast-persistent-color, #fff);
@@ -34,6 +38,7 @@ export class DileToastPersistent extends DileOverlay(LitElement) {
         max-width: var(--dile-toast-persistent-max-width, 300px);
         box-shadow: var(--dile-toast-persistent-box-shadow, 0 0 2px rgba(200, 200, 200, 0.5));
         padding: var(--dile-toast-persistent-padding, 1px);
+        overfloy: var(--dile-toast-persistent-overflow, visible);
         display: none;
         position: absolute;
         opacity: 0;
@@ -53,7 +58,11 @@ export class DileToastPersistent extends DileOverlay(LitElement) {
 
   static get properties() {
     return {
-      right: { 
+      right: {
+        type: Boolean,
+        reflect: true
+      },
+      center: {
         type: Boolean,
         reflect: true
       },
@@ -79,8 +88,17 @@ export class DileToastPersistent extends DileOverlay(LitElement) {
   }
   
   updated(changedProperties) {
-    if(changedProperties.has('right') && this.right !== undefined) {
-      this.horizontalAlign = this.right ? 'left' : 'right';
+    if(changedProperties.has('right') || changedProperties.has('center')) {
+      if (this.right) {
+        this.horizontalAlign = 'left';
+        this.moveLeft = -10;
+      } else if (this.center) {
+        this.horizontalAlign = 'center';
+        this.moveLeft = 0;
+      } else {
+        this.horizontalAlign = 'right';
+        this.moveLeft = -10;
+      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.22.1",
+  "version": "2.23.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "20de388e2c9140eb18f37c5f4102efc1da4b955a"
+  "gitHead": "23bbf4bd601d3cd5941b46ca590ca090e18bdddc"
 }