Bump version to 2.1.0

package-lock.json

@@ -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",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
-      "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+      "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",
+      "version": "2.14.0",
-      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.2.1/helpers-1.2.1.tgz",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/helpers/-/helpers-2.14.0.tgz",
-      "integrity": "sha512-ukcITyYE10lFT9lTOuu8UQM0s/qKIfw6ihYHVZbUViKyMgGNihWPIQSTZJS5UV2bVbBtQdwQJ+91WcO79ymk3g==",
+      "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",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
-      "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+      "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ=="
     },
     "@lit/reactive-element": {
       "version": "1.6.2",
@@ -112,9 +169,9 @@
       }
     },
     "@tp/helpers": {
-      "version": "1.2.1",
+      "version": "2.14.0",
-      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.2.1/helpers-1.2.1.tgz",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/@tp/helpers/-/helpers-2.14.0.tgz",
-      "integrity": "sha512-ukcITyYE10lFT9lTOuu8UQM0s/qKIfw6ihYHVZbUViKyMgGNihWPIQSTZJS5UV2bVbBtQdwQJ+91WcO79ymk3g=="
+      "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": {

package.json

@@ -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"
   }
 }

tp-toast.js

@@ -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;
+          display: inline-block;
-          --tp-toast-success-icon-color: #fff;
+          position: relative;
-          --tp-toast-error-icon-color: #fff;
-          --tp-toast-warning-icon-color: #fff;
           transition: transform 0.5s, opacity 0.3s;
           will-change: transform, opacity;
-          display: inline-block;
           border-radius: 2px;
           background: #FAFAFA;
           font-size: 0.8em;
@@ -27,41 +26,31 @@ class TpToast extends EventHelpers(LitElement) {
                     0 1px 8px 0 rgba(0, 0, 0, 0.12),
                     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;
+          padding: 10px 0 10px 10px;
-          border-right: 1px #fff;
-          color: #ffffff;
           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">
+        <div class="icon" part="type-icon-wrap">
-          <tp-icon .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
+          <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">
+          <div class="dismiss" part="dismiss-icon-wrap">
-            <tp-icon .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
+            <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);
     }

tp-toaster.js

@@ -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);
         }