Initial implementation

tp-timeout-strip.js

@@ -0,0 +1,75 @@
+/**
+@license
+Copyright (c) 2025 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+
+class TpTimeoutStrip extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          height: var(--tp-timeout-strip-width, 3px);
+          pointer-events: none;
+        }
+
+        .strip {
+          height: 100%;
+          width: 100%;
+          background: var(--tp-timeout-strip-color, #000);
+          transform-origin: left;
+          display: none;
+        }
+
+        .strip.active {
+          display: block;
+          animation: shrink linear forwards;
+        }
+
+        @keyframes shrink {
+          from {
+            transform: scaleX(1);
+          }
+          to {
+            transform: scaleX(0);
+          }
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="strip ${this.active ? 'active' : ''}" style="animation-duration: ${this.timeout}ms" @animationend=${this._onAnimationEnd}></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      active: { type: Boolean },
+      timeout: { type: Number }
+    };
+  }
+
+  constructor() {
+    super();
+    this.active = false;
+    this.timeout = 0;
+    this._onAnimationEnd = this._onAnimationEnd.bind(this);
+  }
+
+  show(timeout) {
+    this.timeout = timeout;
+    this.active = true;
+  }
+
+  _onAnimationEnd() {
+    this.active = false;
+    this.dispatchEvent(new CustomEvent('timeout', { detail: null, bubbles: true, composed: true }));
+  }
+}
+
+window.customElements.define('tp-timeout-strip', TpTimeoutStrip);