clipxjs 1.2.2 → 1.3.1

package/dist/clipx.min.js

@@ -1,8 +1,2 @@
-/* 
-    ClipX JS
-    https://clipx.js.org
-    Version: 1.2.0
-    Copyright (c) 2024 Mr Akshay Shinde
-    Licensed under the MIT license
-*/
-(function(t){function e(){this.attach=this.attach.bind(this),this.isProcessing=!1,this.disable={msg:!1,toast:!1},this.customStyles={}}e.prototype.copyText=function(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);if(navigator.permissions)return navigator.permissions.query({name:"clipboard-write"}).then(function(e){if("granted"===e.state||"prompt"===e.state)return navigator.clipboard.writeText(t);throw new Error("Clipboard write permission denied.")});var e=document.createElement("textarea");return e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),Promise.resolve()},e.prototype.cutText=function(t,e){return this.copyText(t).then(function(){e&&(e.value="",e.textContent="")})},e.prototype.copyFromElement=function(t){var e=t.value||t.textContent;return this.copyText(e)},e.prototype.cutFromElement=function(t){var e=t.value||t.textContent;return this.cutText(e,t)},e.prototype.attach=function(t){var e=document.querySelectorAll(t);e.forEach(function(t){t.addEventListener("click",function(){if(!this.isProcessing){this.isProcessing=!0;var e,n=t.getAttribute("data-clipx-target"),o=t.getAttribute("data-clipx-text"),i=t.hasAttribute("data-clipx-cut"),s=t.getAttribute("data-clipx-msg"),a=t.hasAttribute("data-clipx-toast"),r=t.hasAttribute("data-clipx-disable-msg"),c=t.hasAttribute("data-clipx-disable-toast"),l=t.getAttribute("data-clipx-toast-position")||"bottom",p=parseInt(t.getAttribute("data-clipx-duration"),10)||1500;if(n){var d=document.querySelector(n);d&&(e=i?this.cutFromElement(d):this.copyFromElement(d))}else o&&(e=i?this.cutText(o):this.copyText(o));e&&e.then(()=>this.onSuccess(t,s,a,r,c,l,p)).catch(e=>this.onError(t,e)).finally(()=>{this.isProcessing=!1})}}.bind(this))}.bind(this))},e.prototype.onSuccess=function(t,e,n,o,i,s,a){var r=t.textContent,c=e||"Copied !",l="top"===s?"clipx-toast top":"clipx-toast bottom";if(n||o||this.disable.msg||(t.textContent=c),i||this.disable.toast)setTimeout(function(){this.disable.msg||(t.textContent=r)}.bind(this),a);else{var p=document.createElement("div");p.className=l;var d='<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>';p.innerHTML=d+c,p.setAttribute("role","alert"),p.setAttribute("aria-live","assertive"),p.style.cssText=this.customStyles.toast||"",document.body.appendChild(p),p.style.opacity=0,setTimeout(()=>p.style.opacity=1,0),setTimeout(function(){p.style.opacity=0,setTimeout(()=>document.body.removeChild(p),500),n||o||this.disable.msg||(t.textContent=r)}.bind(this),a)}},e.prototype.onError=function(t,e){console.error("Failed to cut/copy text: ",e);var n=document.createElement("div");n.className="clipx-toast error";var o='<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>';n.innerHTML=o+"Failed to copy!",n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.style.cssText=this.customStyles.toast||"",document.body.appendChild(n),setTimeout(()=>{n.style.opacity=0,setTimeout(()=>document.body.removeChild(n),500)},1500)},e.prototype.setCustomStyles=function(t){this.customStyles=t},t.clipx=e;var n=document.createElement("style");n.textContent="\n        .clipx-toast {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: #fff;\n    color: #363636;\n    padding: 8px 10px;\n    border-radius: 8px;\n    z-index: 9999;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);\n    font-size: 14px;\n    text-align: center;\n    opacity: 0;\n    animation: fadeIn 0.5s ease forwards;\n    transition: opacity 0.5s ease;\n    max-width: 90%; /* Ensure it fits well on smaller screens */\n    width: auto; /* Ensure the width adjusts based on content */\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.clipx-toast.top {\n    top: 20px;\n    bottom: auto;\n}\n\n.clipx-toast.bottom {\n    bottom: 20px;\n}\n\n.clipx-toast.error {\n    background-color: #f8d7da;\n    color: #721c24;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(10px) translateX(-50%);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) translateX(-50%);\n    }\n}\n\n@keyframes fadeOut {\n    from {\n        opacity: 1;\n        transform: translateY(0) translateX(-50%);\n    }\n    to {\n        opacity: 0;\n        transform: translateY(10px) translateX(-50%);\n    }\n}",document.head.appendChild(n)})(this);
+/*! ClipX JS v1.3.0 | MIT | https://clipx.js.org */
+!function(){var t=function(){"use strict";var t="undefined"!=typeof document&&document,i="undefined"!=typeof navigator?navigator:{},o=(t,i)=>'<svg class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="'+t+'" aria-hidden="true"><path fill-rule="evenodd" d="'+i+'"/></svg>',e={ok:o("#00d241","M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9.4z"),err:o("#e70000","M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z")},r=t=>t&&t.parentNode&&t.parentNode.removeChild(t),s=t=>/^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName),n=t=>s(t)?t.value:t.textContent,a=(t,i,o)=>t.dispatchEvent(o?new CustomEvent(i,{bubbles:!0,detail:o}):new Event(i,{bubbles:!0})),c=(t,i)=>{s(t)?(t.value=i,a(t,"input"),a(t,"change")):t.textContent=i},p=i=>new Promise((o,e)=>{var s=t.activeElement,n=t.createElement("textarea"),a=!1;n.value=i,n.readOnly=!0,n.style.cssText="position:fixed;top:0;opacity:0",t.body.appendChild(n),n.select();try{n.setSelectionRange(0,i.length),a=t.execCommand("copy")}catch(t){}r(n),s&&s.focus&&s.focus(),a?o():e(Error("Copy failed"))}),h={trim:t=>t.trim(),uppercase:t=>t.toUpperCase(),lowercase:t=>t.toLowerCase(),capitalize:t=>t.charAt(0).toUpperCase()+t.slice(1),titlecase:t=>t.toLowerCase().replace(/(^|\s)\S/g,t=>t.toUpperCase()),collapse:t=>t.replace(/\s+/g," "),singleline:t=>t.replace(/\s*[\r\n]+\s*/g," "),striphtml:t=>t.replace(/<[^>]*>/g,"")};function l(){this.disable={msg:!1,toast:!1},this.customStyles={},this.formatters=Object.assign({},h),this._sel=[],this._fn=null,this.t={}}var u=l.prototype;return l.version="1.3.0",u.addFormatter=function(t,i){if("function"!=typeof i)throw new TypeError("Formatter must be a function");return this.formatters[String(t).toLowerCase()]=i,this},u.format=function(t,i){return t=null==t?"":String(t),(Array.isArray(i)?i:String(i||"").split(",")).forEach(i=>{i=String(i).trim().toLowerCase();var o=this.formatters[i];o?t=String(o(t)):i&&console.warn("ClipX: unknown format '"+i+"'")}),t},u.copyText=function(t){return t=null==t?"":String(t),i.clipboard&&i.clipboard.writeText?i.clipboard.writeText(t).catch(()=>p(t)):p(t)},u.cutText=function(t,i){return this.copyText(t).then(()=>{i&&c(i,"")})},u.copyFromElement=function(t,i){var o=this.format(n(t),i);return o?this.copyText(o):Promise.reject(Error("Nothing to copy."))},u.cutFromElement=function(t,i){var o=this.format(n(t),i);return o?this.cutText(o,t):Promise.reject(Error("Nothing to copy."))},u.pasteText=function(){return i.clipboard&&i.clipboard.readText?i.clipboard.readText():Promise.reject(Error("Paste is not supported here."))},u.pasteToElement=function(t,i){return this.pasteText().then(o=>(o=this.format(o,i),c(t,o),o))},u.attach=function(i){return t?(i=i||"[data-clipx-text],[data-clipx-target],[data-clipx-paste]",this._sel.indexOf(i)<0&&this._sel.push(i),this._fn||t.addEventListener("click",this._fn=t=>{var i=t.target;i&&1!=i.nodeType&&(i=i.parentElement),(i=i&&i.closest&&i.closest(this._sel.join(",")))&&this._run(i)}),this):this},u.detach=function(){return this._fn&&t.removeEventListener("click",this._fn),this._fn=null,this._sel=[],this},u._run=function(i){if(!i.__cx){var o,e,r=t=>i.getAttribute("data-clipx-"+t),s=t=>i.hasAttribute("data-clipx-"+t),n=r("format"),a=s("cut"),c="copy",p=parseInt(r("duration"),10);try{if(r("paste")){if(c="paste",!(e=t.querySelector(r("paste"))))throw Error("Paste target not found");o=this.pasteToElement(e,n)}else if(r("target")){if(!(e=t.querySelector(r("target"))))throw Error("Target not found");c=a?"cut":"copy",o=a?this.cutFromElement(e,n):this.copyFromElement(e,n)}else{if(!s("text"))throw Error("Add data-clipx-target, -text or -paste");if(!(e=this.format(r("text"),n)))throw Error("Nothing to copy.");o=this.copyText(e)}}catch(t){return this.onError(i,t)}i.__cx=1,o.then(()=>this.onSuccess(i,r("msg"),s("toast"),s("disable-msg"),s("disable-toast"),r("toast-position")||"bottom",p>0?p:1500,c),t=>this.onError(i,t)).then(()=>{i.__cx=0})}},u.onSuccess=function(t,i,o,e,r,s,n,c){i=i||("paste"==c?"Pasted!":"Copied!"),o||e||this.disable.msg||(void 0===t.__o&&(t.__o=t.innerHTML),t.textContent=i,clearTimeout(t.__t),t.__t=setTimeout(()=>{t.innerHTML=t.__o,t.__o=void 0},n)),r||this.disable.toast||this._toast(i,"ok",s,n),a(t,"clipx:success",{type:c||"copy"})},u.onError=function(t,i){console.error("ClipX:",i),this.disable.toast||this._toast(i&&"Nothing to copy."==i.message?i.message:"Failed to copy!","err","bottom",1500),a(t,"clipx:error",{error:i})},u._toast=function(i,o,s,n){if(!t.getElementById("clipx-js-styles")){var a=t.createElement("style");a.id="clipx-js-styles",a.textContent=".clipx-toast{font:14px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;position:fixed;left:50%;transform:translateX(-50%);background:#fff;color:#363636;padding:8px 10px;border-radius:8px;z-index:9999;box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);opacity:0;transition:opacity .3s;max-width:90%;display:flex;align-items:center;gap:5px;pointer-events:none}.clipx-show{opacity:1}.clipx-toast.top{top:20px}.clipx-toast.bottom{bottom:20px}.clipx-toast.error{background:#f8d7da;color:#721c24}@media(prefers-reduced-motion:reduce){.clipx-toast{transition:none}}",(t.head||t.documentElement).appendChild(a)}s="top"==s?"top":"bottom",r(this.t[s]);var c=t.createElement("div"),p=t.createElement("span");c.className="clipx-toast "+s+("err"==o?" error":""),c.setAttribute("role","err"==o?"alert":"status"),c.innerHTML=e[o],p.textContent=i,c.appendChild(p),c.style.cssText=(this.customStyles.toast||"")+";"+("err"==o&&this.customStyles.error||""),t.body.appendChild(c),this.t[s]=c,setTimeout(()=>c.classList.add("clipx-show"),10),setTimeout(()=>{c.classList.remove("clipx-show"),setTimeout(()=>{r(c),this.t[s]==c&&(this.t[s]=null)},300)},n)},u.setCustomStyles=function(t){return this.customStyles=t||{},this},l.ClipX=l,l}();"object"==typeof module&&module.exports&&(module.exports=t),"undefined"!=typeof window&&(window.clipx=window.ClipX=t)}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipxjs",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward copy, cut, and paste capabilities, and built-in toast notifications that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.",
   "main": "src/clipx.js",
   "scripts": {

package/src/clipx.js

@@ -1,283 +1,229 @@
-/* 
-    ClipX JS
-    https://clipx.js.org
-    Version: 1.2.0
-    Copyright (c) 2024 Mr Akshay Shinde
-    Licensed under the MIT license
-*/
-(function (global) {
-  // Constructor for the clipx object
-  function clipx() {
-    this.attach = this.attach.bind(this); // Bind the attach method to the instance
-    this.isProcessing = false; // Flag to prevent multiple executions
-    // Global flags to disable specific features
-    this.disable = {
-      msg: false,
-      toast: false,
+/*! ClipX JS v1.3.0 | MIT | https://clipx.js.org */
+(function (g, f) {
+  var c = f();
+  if (typeof module == "object" && module.exports) module.exports = c;
+  if (typeof window != "undefined") window.clipx = window.ClipX = c;
+})(this, function () {
+  "use strict";
+  var D = typeof document != "undefined" && document,
+    nav = typeof navigator != "undefined" ? navigator : {},
+    SEL = "[data-clipx-text],[data-clipx-target],[data-clipx-paste]",
+    svg = (fill, d) =>
+      '<svg class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="' + fill +
+      '" aria-hidden="true"><path fill-rule="evenodd" d="' + d + '"/></svg>',
+    ICON = {
+      ok: svg("#00d241", "M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9.4z"),
+      err: svg("#e70000", "M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z"),
+    },
+    CSS =
+      ".clipx-toast{font:14px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;position:fixed;left:50%;transform:translateX(-50%);background:#fff;color:#363636;padding:8px 10px;border-radius:8px;z-index:9999;box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);opacity:0;transition:opacity .3s;max-width:90%;display:flex;align-items:center;gap:5px;pointer-events:none}" +
+      ".clipx-show{opacity:1}.clipx-toast.top{top:20px}.clipx-toast.bottom{bottom:20px}.clipx-toast.error{background:#f8d7da;color:#721c24}" +
+      "@media(prefers-reduced-motion:reduce){.clipx-toast{transition:none}}",
+    rm = (n) => n && n.parentNode && n.parentNode.removeChild(n),
+    isV = (e) => /^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName),
+    get = (e) => (isV(e) ? e.value : e.textContent),
+    fire = (e, n, d) =>
+      e.dispatchEvent(d ? new CustomEvent(n, { bubbles: true, detail: d }) : new Event(n, { bubbles: true })),
+    set = (e, t) => {
+      if (isV(e)) {
+        e.value = t;
+        fire(e, "input");
+        fire(e, "change");
+      } else e.textContent = t;
+    },
+    legacy = (t) =>
+      new Promise((ok, no) => {
+        var a = D.activeElement, x = D.createElement("textarea"), r = false;
+        x.value = t;
+        x.readOnly = true;
+        x.style.cssText = "position:fixed;top:0;opacity:0";
+        D.body.appendChild(x);
+        x.select();
+        try {
+          x.setSelectionRange(0, t.length);
+          r = D.execCommand("copy");
+        } catch (e) {}
+        rm(x);
+        a && a.focus && a.focus();
+        r ? ok() : no(Error("Copy failed"));
+      }),
+    FMT = {
+      trim: (s) => s.trim(),
+      uppercase: (s) => s.toUpperCase(),
+      lowercase: (s) => s.toLowerCase(),
+      capitalize: (s) => s.charAt(0).toUpperCase() + s.slice(1),
+      titlecase: (s) => s.toLowerCase().replace(/(^|\s)\S/g, (c) => c.toUpperCase()),
+      collapse: (s) => s.replace(/\s+/g, " "),
+      singleline: (s) => s.replace(/\s*[\r\n]+\s*/g, " "),
+      striphtml: (s) => s.replace(/<[^>]*>/g, ""),
     };
-    this.customStyles = {}; // Store custom styles for the toast notifications
+
+  function clipx() {
+    this.disable = { msg: false, toast: false };
+    this.customStyles = {};
+    this.formatters = Object.assign({}, FMT);
+    this._sel = [];
+    this._fn = null;
+    this._t = {};
   }
+  var P = clipx.prototype;
+  clipx.version = "1.3.0";
 
-  // Method to copy text to clipboard
-  clipx.prototype.copyText = function (text) {
-    if (navigator.clipboard) {
-      // Use the Clipboard API if available
-      return navigator.clipboard.writeText(text);
-    } else if (navigator.permissions) {
-      // Check permissions if Clipboard API is not available
-      return navigator.permissions
-        .query({ name: "clipboard-write" })
-        .then(function (permissionStatus) {
-          if (
-            permissionStatus.state === "granted" ||
-            permissionStatus.state === "prompt"
-          ) {
-            return navigator.clipboard.writeText(text);
-          } else {
-            throw new Error("Clipboard write permission denied.");
-          }
-        });
-    } else {
-      // Fallback to using a temporary textarea element for older browsers
-      var textArea = document.createElement("textarea");
-      textArea.value = text;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textArea);
-      return Promise.resolve();
-    }
+  P.addFormatter = function (n, f) {
+    if (typeof f != "function") throw new TypeError("Formatter must be a function");
+    this.formatters[String(n).toLowerCase()] = f;
+    return this;
   };
-
-  // Method to cut (copy and then clear) text from an element
-  clipx.prototype.cutText = function (text, element) {
-    return this.copyText(text).then(function () {
-      if (element) {
-        element.value = ""; // Clear value for input elements
-        element.textContent = ""; // Clear text content for non-input elements
-      }
+  P.format = function (t, spec) {
+    t = t == null ? "" : String(t);
+    (Array.isArray(spec) ? spec : String(spec || "").split(",")).forEach((n) => {
+      n = String(n).trim().toLowerCase();
+      var f = this.formatters[n];
+      if (f) t = String(f(t));
+      else if (n) console.warn("ClipX: unknown format '" + n + "'");
     });
+    return t;
   };
 
-  // Method to copy text from an element
-  clipx.prototype.copyFromElement = function (element) {
-    var text = element.value || element.textContent; // Get text from input or non-input element
-    return this.copyText(text);
+  P.copyText = function (t) {
+    t = t == null ? "" : String(t);
+    return nav.clipboard && nav.clipboard.writeText
+      ? nav.clipboard.writeText(t).catch(() => legacy(t))
+      : legacy(t);
   };
-
-  // Method to cut (copy and then clear) text from an element
-  clipx.prototype.cutFromElement = function (element) {
-    var text = element.value || element.textContent; // Get text from input or non-input element
-    return this.cutText(text, element);
+  P.cutText = function (t, e) {
+    return this.copyText(t).then(() => {
+      e && set(e, "");
+    });
   };
-
-  // Method to attach event listeners to elements matching the selector
-  clipx.prototype.attach = function (selector) {
-    var elements = document.querySelectorAll(selector);
-    elements.forEach(
-      function (element) {
-        element.addEventListener(
-          "click",
-          function () {
-            if (this.isProcessing) return; // Prevent multiple executions
-            this.isProcessing = true;
-
-            var targetSelector = element.getAttribute("data-clipx-target");
-            var text = element.getAttribute("data-clipx-text");
-            var cut = element.hasAttribute("data-clipx-cut");
-            var msgType = element.getAttribute("data-clipx-msg");
-            var toastOnly = element.hasAttribute("data-clipx-toast");
-            var disableMsg = element.hasAttribute("data-clipx-disable-msg");
-            var disableToast = element.hasAttribute("data-clipx-disable-toast");
-            var toastPosition =
-              element.getAttribute("data-clipx-toast-position") || "bottom";
-            var contentDuration =
-              parseInt(element.getAttribute("data-clipx-duration"), 10) || 1500;
-
-            var actionPromise;
-
-            // Determine the action based on attributes
-            if (targetSelector) {
-              var targetElement = document.querySelector(targetSelector);
-              if (targetElement) {
-                actionPromise = cut
-                  ? this.cutFromElement(targetElement)
-                  : this.copyFromElement(targetElement);
-              }
-            } else if (text) {
-              actionPromise = cut ? this.cutText(text) : this.copyText(text);
-            }
-
-            if (actionPromise) {
-              actionPromise
-                .then(() =>
-                  this.onSuccess(
-                    element,
-                    msgType,
-                    toastOnly,
-                    disableMsg,
-                    disableToast,
-                    toastPosition,
-                    contentDuration
-                  )
-                )
-                .catch((err) => this.onError(element, err))
-                .finally(() => {
-                  this.isProcessing = false;
-                });
-            }
-          }.bind(this)
-        );
-      }.bind(this)
-    );
+  P.copyFromElement = function (e, f) {
+    var t = this.format(get(e), f);
+    return t ? this.copyText(t) : Promise.reject(Error("Nothing to copy."));
+  };
+  P.cutFromElement = function (e, f) {
+    var t = this.format(get(e), f);
+    return t ? this.cutText(t, e) : Promise.reject(Error("Nothing to copy."));
+  };
+  P.pasteText = function () {
+    return nav.clipboard && nav.clipboard.readText
+      ? nav.clipboard.readText()
+      : Promise.reject(Error("Paste is not supported here."));
+  };
+  P.pasteToElement = function (e, f) {
+    return this.pasteText().then((t) => {
+      t = this.format(t, f);
+      set(e, t);
+      return t;
+    });
   };
 
-  // Handle successful copy/cut operation
-  clipx.prototype.onSuccess = function (
-    element,
-    msgType,
-    toastOnly,
-    disableMsg,
-    disableToast,
-    toastPosition,
-    contentDuration
-  ) {
-    var originalText = element.textContent; // Store original text content
-    var customMessage = msgType || "Copied !"; // Use provided message or default to "Copied!"
-    var toastClass =
-      toastPosition === "top" ? "clipx-toast top" : "clipx-toast bottom";
-
-    if (!toastOnly && !disableMsg && !this.disable.msg) {
-      element.textContent = customMessage; // Update element's text content
-    }
-
-    if (!disableToast && !this.disable.toast) {
-      var toast = document.createElement("div");
-      toast.className = toastClass;
-      // Insert the success SVG icon along with the custom message
-      var successSVG = `<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>`;
-      toast.innerHTML = successSVG + customMessage;
-      toast.setAttribute("role", "alert");
-      toast.setAttribute("aria-live", "assertive");
-      toast.style.cssText = this.customStyles.toast || ""; // Apply custom styles if any
-
-      document.body.appendChild(toast);
-
-      // Fade-in and fade-out animation
-      toast.style.opacity = 0;
-      setTimeout(() => (toast.style.opacity = 1), 0);
-
-      setTimeout(
-        function () {
-          toast.style.opacity = 0;
-          setTimeout(() => document.body.removeChild(toast), 500);
-
-          if (!toastOnly && !disableMsg && !this.disable.msg) {
-            element.textContent = originalText; // Restore original text content
-          }
-        }.bind(this),
-        contentDuration
-      );
-    } else {
-      setTimeout(
-        function () {
-          if (!this.disable.msg) {
-            element.textContent = originalText; // Restore original text content
-          }
-        }.bind(this),
-        contentDuration
+  P.attach = function (s) {
+    if (!D) return this;
+    s = s || SEL;
+    this._sel.indexOf(s) < 0 && this._sel.push(s);
+    this._fn ||
+      D.addEventListener(
+        "click",
+        (this._fn = (e) => {
+          var n = e.target;
+          n && n.nodeType != 1 && (n = n.parentElement);
+          n = n && n.closest && n.closest(this._sel.join(","));
+          n && this._run(n);
+        })
       );
-    }
+    return this;
   };
-
-  // Handle errors during copy/cut operation
-  clipx.prototype.onError = function (element, err) {
-    console.error("Failed to cut/copy text: ", err);
-    var toast = document.createElement("div");
-    toast.className = "clipx-toast error";
-    // Insert the error SVG icon along with the error message
-    var errorSVG = `<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>`;
-    toast.innerHTML = errorSVG + "Failed to copy!";
-    toast.setAttribute("role", "alert");
-    toast.setAttribute("aria-live", "assertive");
-    toast.style.cssText = this.customStyles.toast || "";
-
-    document.body.appendChild(toast);
-    setTimeout(() => {
-      toast.style.opacity = 0;
-      setTimeout(() => document.body.removeChild(toast), 500);
-    }, 1500);
+  P.detach = function () {
+    this._fn && D.removeEventListener("click", this._fn);
+    this._fn = null;
+    this._sel = [];
+    return this;
   };
 
-  // Method to set custom styles for toast notifications
-  clipx.prototype.setCustomStyles = function (styles) {
-    this.customStyles = styles;
+  P._run = function (el) {
+    if (el.__cx) return;
+    var a = (n) => el.getAttribute("data-clipx-" + n),
+      h = (n) => el.hasAttribute("data-clipx-" + n),
+      fm = a("format"), cut = h("cut"), ty = "copy", p, s,
+      d = parseInt(a("duration"), 10);
+    try {
+      if (a("paste")) {
+        ty = "paste";
+        if (!(s = D.querySelector(a("paste")))) throw Error("Paste target not found");
+        p = this.pasteToElement(s, fm);
+      } else if (a("target")) {
+        if (!(s = D.querySelector(a("target")))) throw Error("Target not found");
+        ty = cut ? "cut" : "copy";
+        p = cut ? this.cutFromElement(s, fm) : this.copyFromElement(s, fm);
+      } else if (h("text")) {
+        if (!(s = this.format(a("text"), fm))) throw Error("Nothing to copy.");
+        p = this.copyText(s);
+      } else throw Error("Add data-clipx-target, -text or -paste");
+    } catch (err) {
+      return this.onError(el, err);
+    }
+    el.__cx = 1;
+    p.then(
+      () => this.onSuccess(el, a("msg"), h("toast"), h("disable-msg"), h("disable-toast"), a("toast-position") || "bottom", d > 0 ? d : 1500, ty),
+      (err) => this.onError(el, err)
+    ).then(() => {
+      el.__cx = 0;
+    });
   };
 
-  // Expose the clipx constructor to the global object
-  global.clipx = clipx;
-
-  // Add default styles for toast notifications
-  var style = document.createElement("style");
-  style.textContent = `
-        .clipx-toast {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #fff;
-    color: #363636;
-    padding: 8px 10px;
-    border-radius: 8px;
-    z-index: 9999;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
-    font-size: 14px;
-    text-align: center;
-    opacity: 0;
-    animation: fadeIn 0.5s ease forwards;
-    transition: opacity 0.5s ease;
-    max-width: 90%; /* Ensure it fits well on smaller screens */
-    width: auto; /* Ensure the width adjusts based on content */
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.clipx-toast.top {
-    top: 20px;
-    bottom: auto;
-}
-
-.clipx-toast.bottom {
-    bottom: 20px;
-}
-
-.clipx-toast.error {
-    background-color: #f8d7da;
-    color: #721c24;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px) translateX(-50%);
+  P.onSuccess = function (el, msg, only, noMsg, noToast, pos, dur, ty) {
+    msg = msg || (ty == "paste" ? "Pasted!" : "Copied!");
+    if (!only && !noMsg && !this.disable.msg) {
+      if (el.__o === undefined) el.__o = el.innerHTML;
+      el.textContent = msg;
+      clearTimeout(el.__t);
+      el.__t = setTimeout(() => {
+        el.innerHTML = el.__o;
+        el.__o = undefined;
+      }, dur);
     }
-    to {
-        opacity: 1;
-        transform: translateY(0) translateX(-50%);
-    }
-}
+    noToast || this.disable.toast || this._toast(msg, "ok", pos, dur);
+    fire(el, "clipx:success", { type: ty || "copy" });
+  };
+  P.onError = function (el, e) {
+    console.error("ClipX:", e);
+    this.disable.toast ||
+      this._toast(e && e.message == "Nothing to copy." ? e.message : "Failed to copy!", "err", "bottom", 1500);
+    fire(el, "clipx:error", { error: e });
+  };
 
-@keyframes fadeOut {
-    from {
-        opacity: 1;
-        transform: translateY(0) translateX(-50%);
-    }
-    to {
-        opacity: 0;
-        transform: translateY(10px) translateX(-50%);
+  P._toast = function (m, k, pos, dur) {
+    if (!D.getElementById("clipx-js-styles")) {
+      var s = D.createElement("style");
+      s.id = "clipx-js-styles";
+      s.textContent = CSS;
+      (D.head || D.documentElement).appendChild(s);
     }
-}`;
-  document.head.appendChild(style);
+    pos = pos == "top" ? "top" : "bottom";
+    rm(this._t[pos]);
+    var t = D.createElement("div"), l = D.createElement("span");
+    t.className = "clipx-toast " + pos + (k == "err" ? " error" : "");
+    t.setAttribute("role", k == "err" ? "alert" : "status");
+    t.innerHTML = ICON[k];
+    l.textContent = m;
+    t.appendChild(l);
+    t.style.cssText = (this.customStyles.toast || "") + ";" + (k == "err" ? this.customStyles.error || "" : "");
+    D.body.appendChild(t);
+    this._t[pos] = t;
+    setTimeout(() => t.classList.add("clipx-show"), 10);
+    setTimeout(() => {
+      t.classList.remove("clipx-show");
+      setTimeout(() => {
+        rm(t);
+        if (this._t[pos] == t) this._t[pos] = null;
+      }, 300);
+    }, dur);
+  };
 
-})(this);
+  P.setCustomStyles = function (s) {
+    this.customStyles = s || {};
+    return this;
+  };
+  clipx.ClipX = clipx;
+  return clipx;
+});