Bump version to 2.1.0

Copy message to clipboard on click
Make styling more versitile and add a timeout strip
2026-10-25 12:51:21 +01:00 · 2026-10-25 12:51:21 +01:00 · 2025-07-31 15:56:32 +02:00 · 2024-10-21 23:35:24 +02:00
4 changed files with 191 additions and 55 deletions
@@ -1,24 +1,26 @@
 {
  "name": "@tp/tp-toaster",
-  "version": "0.0.1",
+  "version": "2.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@tp/tp-toaster",
-      "version": "0.0.1",
+      "version": "2.1.0",
      "license": "Apache-2.0",
      "dependencies": {
-        "@tp/helpers": "^1.2.1",
+        "@tp/helpers": "^2.8.0",
        "@tp/tp-icon": "^1.0.1",
        "@tp/tp-media-query": "^1.0.0",
+        "@tp/tp-timeout-strip": "^1.0.0",
        "lit": "^2.2.0"
      }
    },
    "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
-      "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
+      "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==",
+      "license": "BSD-3-Clause"
    },
    "node_modules/@lit/reactive-element": {
      "version": "1.6.2",
@@ -29,9 +31,9 @@
      }
    },
    "node_modules/@tp/helpers": {
-      "version": "1.2.1",
-      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.2.1/helpers-1.2.1.tgz",
-      "integrity": "sha512-ukcITyYE10lFT9lTOuu8UQM0s/qKIfw6ihYHVZbUViKyMgGNihWPIQSTZJS5UV2bVbBtQdwQJ+91WcO79ymk3g==",
+      "version": "2.14.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/helpers/-/helpers-2.14.0.tgz",
+      "integrity": "sha512-sJsSkQPvxDXCMr/WJ9cgSJygqGKwDUpgd2ClV83t3+PASH1iozMjDDhJMW18wjza5qZWz9blqYQMues9XFGv7Q==",
      "license": "Apache-2.0"
    },
    "node_modules/@tp/tp-icon": {
@@ -53,6 +55,55 @@
        "lit": "^2.2.0"
      }
    },
+    "node_modules/@tp/tp-timeout-strip": {
+      "version": "1.0.1",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/tp-timeout-strip/-/tp-timeout-strip-1.0.1.tgz",
+      "integrity": "sha512-Iw2BstoE4cANffZCauNkDX9N6Yv3jfN2PrSmGkAo9X1o25tl+o0J3ZrP2ySAJhMma1XqLv/tWP0j3Ubt0UPD+Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lit": "^3.0.0"
+      }
+    },
+    "node_modules/@tp/tp-timeout-strip/node_modules/@lit/reactive-element": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.2.tgz",
+      "integrity": "sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.5.0"
+      }
+    },
+    "node_modules/@tp/tp-timeout-strip/node_modules/lit": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.3.tgz",
+      "integrity": "sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/@tp/tp-timeout-strip/node_modules/lit-element": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.2.tgz",
+      "integrity": "sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.5.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/@tp/tp-timeout-strip/node_modules/lit-html": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.3.tgz",
+      "integrity": "sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
    "node_modules/@tp/tp-tooltip": {
      "version": "1.0.0",
      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-tooltip/-/1.0.0/tp-tooltip-1.0.0.tgz",
@@ -63,6 +114,12 @@
        "lit": "^2.2.0"
      }
    },
+    "node_modules/@tp/tp-tooltip/node_modules/@tp/helpers": {
+      "version": "1.3.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/helpers/-/helpers-1.3.0.tgz",
+      "integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA==",
+      "license": "Apache-2.0"
+    },
    "node_modules/@types/trusted-types": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
@@ -99,9 +156,9 @@
  },
  "dependencies": {
    "@lit-labs/ssr-dom-shim": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
-      "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
+      "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ=="
    },
    "@lit/reactive-element": {
      "version": "1.6.2",
@@ -112,9 +169,9 @@
      }
    },
    "@tp/helpers": {
-      "version": "1.2.1",
-      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.2.1/helpers-1.2.1.tgz",
-      "integrity": "sha512-ukcITyYE10lFT9lTOuu8UQM0s/qKIfw6ihYHVZbUViKyMgGNihWPIQSTZJS5UV2bVbBtQdwQJ+91WcO79ymk3g=="
+      "version": "2.14.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/helpers/-/helpers-2.14.0.tgz",
+      "integrity": "sha512-sJsSkQPvxDXCMr/WJ9cgSJygqGKwDUpgd2ClV83t3+PASH1iozMjDDhJMW18wjza5qZWz9blqYQMues9XFGv7Q=="
    },
    "@tp/tp-icon": {
      "version": "1.0.1",
@@ -133,6 +190,52 @@
        "lit": "^2.2.0"
      }
    },
+    "@tp/tp-timeout-strip": {
+      "version": "1.0.1",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/tp-timeout-strip/-/tp-timeout-strip-1.0.1.tgz",
+      "integrity": "sha512-Iw2BstoE4cANffZCauNkDX9N6Yv3jfN2PrSmGkAo9X1o25tl+o0J3ZrP2ySAJhMma1XqLv/tWP0j3Ubt0UPD+Q==",
+      "requires": {
+        "lit": "^3.0.0"
+      },
+      "dependencies": {
+        "@lit/reactive-element": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.2.tgz",
+          "integrity": "sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==",
+          "requires": {
+            "@lit-labs/ssr-dom-shim": "^1.5.0"
+          }
+        },
+        "lit": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.3.tgz",
+          "integrity": "sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==",
+          "requires": {
+            "@lit/reactive-element": "^2.1.0",
+            "lit-element": "^4.2.0",
+            "lit-html": "^3.3.0"
+          }
+        },
+        "lit-element": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.2.tgz",
+          "integrity": "sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==",
+          "requires": {
+            "@lit-labs/ssr-dom-shim": "^1.5.0",
+            "@lit/reactive-element": "^2.1.0",
+            "lit-html": "^3.3.0"
+          }
+        },
+        "lit-html": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.3.tgz",
+          "integrity": "sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==",
+          "requires": {
+            "@types/trusted-types": "^2.0.2"
+          }
+        }
+      }
+    },
    "@tp/tp-tooltip": {
      "version": "1.0.0",
      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-tooltip/-/1.0.0/tp-tooltip-1.0.0.tgz",
@@ -140,6 +243,13 @@
      "requires": {
        "@tp/helpers": "^1.0.0",
        "lit": "^2.2.0"
+      },
+      "dependencies": {
+        "@tp/helpers": {
+          "version": "1.3.0",
+          "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/helpers/-/helpers-1.3.0.tgz",
+          "integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA=="
+        }
      }
    },
    "@types/trusted-types": {
@@ -1,6 +1,6 @@
 {
  "name": "@tp/tp-toaster",
-  "version": "1.0.0",
+  "version": "2.1.0",
  "description": "",
  "main": "tp-toaster.js",
  "scripts": {
@@ -13,9 +13,10 @@
  "author": "trading_peter",
  "license": "Apache-2.0",
  "dependencies": {
-    "@tp/helpers": "^1.2.1",
+    "@tp/helpers": "^2.8.0",
    "@tp/tp-icon": "^1.0.1",
    "@tp/tp-media-query": "^1.0.0",
+    "@tp/tp-timeout-strip": "^1.0.0",
    "lit": "^2.2.0"
  }
 }
@@ -3,7 +3,9 @@
 Copyright (c) 2023 EDV Wasmeier
 */

+import '@tp/tp-timeout-strip/tp-timeout-strip.js';
 import { EventHelpers } from '@tp/helpers/event-helpers.js';
+import { copyToClipboard } from '@tp/helpers/clipboard.js';
 import { LitElement, html, css, svg } from 'lit';

 class TpToast extends EventHelpers(LitElement) {
@@ -11,13 +13,10 @@ class TpToast extends EventHelpers(LitElement) {
    return [
      css`
        :host {
-          --tp-toast-info-icon-color: #fff;
-          --tp-toast-success-icon-color: #fff;
-          --tp-toast-error-icon-color: #fff;
-          --tp-toast-warning-icon-color: #fff;
+          display: inline-block;
+          position: relative;
          transition: transform 0.5s, opacity 0.3s;
          will-change: transform, opacity;
-          display: inline-block;
          border-radius: 2px;
          background: #FAFAFA;
          font-size: 0.8em;
@@ -28,40 +27,30 @@ class TpToast extends EventHelpers(LitElement) {
                    0 3px 3px -2px rgba(0, 0, 0, 0.4);
        }
        
+        tp-timeout-strip {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          pointer-events: none;
+        }
+
        .wrap {
          display: flex;
          flex-direction: row;
+          gap: 10px;
        }

        .icon {
-          padding: 10px;
-          border-right: 1px #fff;
-          color: #ffffff;
+          padding: 10px 0 10px 10px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }

-        :host([type="info"]) .icon {
-          background: #039BE5;
-        }
-
-        :host([type="success"]) .icon {
-          background: #558B2F;
-          color: #fff;
-        }
-
-        :host([type="warning"]) .icon {
-          background: #FFCA28;
-        }
-
-        :host([type="error"]) .icon {
-          background: #B71C1C;
-        }
-
        .content {
-          padding: 10px 10px 10px 10px;
+          padding: 10px 0;
          line-height: 24px;
        }

@@ -85,18 +74,19 @@ class TpToast extends EventHelpers(LitElement) {

    return html`
      <div class="wrap">
-        <div class="icon">
-          <tp-icon .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
+        <div class="icon" part="type-icon-wrap">
+          <tp-icon part="type-icon" .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
        </div>
-        <div class="content">
+        <div class="content" part="content" @click=${this._copyContent}>
          <slot></slot>
        </div>
        ${!sticky ? html`
-          <div class="dismiss">
-            <tp-icon .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
+          <div class="dismiss" part="dismiss-icon-wrap">
+            <tp-icon part="dismiss-icon" .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
          </div>
        ` : null}
      </div>
+      <tp-timeout-strip exportparts="strip: inner-strip" part="timeout-strip"></tp-timeout-strip>
    `;
  }

@@ -108,7 +98,7 @@ class TpToast extends EventHelpers(LitElement) {
      /**
      * Configures what kind of toast this is.
      * Comes with the variants `info`, `warning`, `error`, `success`.
-      * Each type comes with a pre-defined icon, but via the `icon` property a custom icon can also be used.
+      * Each type comes with a pre-defined icon. To use a custom icon use the `icon` property.
      */
      type: { type: String, reflect: true },

@@ -118,6 +108,14 @@ class TpToast extends EventHelpers(LitElement) {
      */
      delay: { type: Number },

+      /**
+      * If true (default), clicking the message copies the toast content to the clipboard
+      * and fires a `toast-copied` event.
+      * Disable via property binding (`.copyOnClick=${false}`) — a present boolean attribute
+      * always converts to true.
+      */
+      copyOnClick: { type: Boolean },
+
      /**
      * If true, the toast cant be dismissed manually.
      */
@@ -133,28 +131,29 @@ class TpToast extends EventHelpers(LitElement) {
    super();
    this.type = 'info';
    this.delay = 5000;
+    this.copyOnClick = true;
    this.translateY = -150;
    this.dismiss = this.dismiss.bind(this);
  }

  static get defaultDismissIcon() {
-    return svg`<path fill="var(--tp-toast-dismiss-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
  }

  static get infoIcon() {
-    return svg`<path fill="var(--tp-toast-info-icon-color)" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
  }

  static get successIcon() {
-    return svg`<path fill="var(--tp-toast-success-icon-color)" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
  }

  static get errorIcon() {
-    return svg`<path fill="var(--tp-toast-error-icon-color)" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />`;
  }

  static get warningIcon() {
-    return svg`<path fill="var(--tp-toast-warning-icon-color)" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />`;
  }

  connectedCallback() {
@@ -178,11 +177,37 @@ class TpToast extends EventHelpers(LitElement) {
    this.style.opacity = '0';
  }

+  /**
+   * Copies the toast content (slotted light-dom text) to the clipboard.
+   * Fires a bubbling, composed `toast-copied` event with `detail.text` on success.
+   * Skipped when `copyOnClick` is false, when the content is empty, or when the user
+   * made a manual text selection inside the toast (don't clobber their own copy).
+   */
+  async _copyContent() {
+    if (!this.copyOnClick) return;
+
+    const selection = window.getSelection();
+    if (selection && selection.toString()) return;
+
+    const text = this.textContent.trim();
+    if (!text) return;
+
+    const success = await copyToClipboard(text);
+    if (success) {
+      this.dispatchEvent(new CustomEvent('toast-copied', {
+        detail: { text },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+  }
+
  /**
   * Starts the delay timeout to dismiss the toast automatically.
   */
  activateDelay() {
    if (this.delay > 0) {
+      this.shadowRoot.querySelector('tp-timeout-strip').show(this.delay);
      this.stopDelay();
      this._delayJob = setTimeout(this.dismiss, this.delay);
    }
@@ -23,7 +23,7 @@ export default class TpToaster extends EventHelpers(LitElement) {
          top: 15px;
          left: 50%;
          width: 50%;
-          z-index: 1009;
+          z-index: 10000;
          transform: translateY(-60px);
        }
Author	SHA1	Message	Date
pk	5bacaec865	Bump version to 2.1.0	2026-10-25 12:51:21 +01:00
pk	8877361fdc	Copy message to clipboard on click	2026-10-25 12:51:21 +01:00
pk	8af6c51058	Make styling more versitile and add a timeout strip	2025-07-31 15:56:32 +02:00
pk	f348b32833	Increase z-index	2024-10-21 23:35:24 +02:00