clipxjs 1.2.1 → 1.3.0

package/LICENSE.md

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024  [Mr Akshay Shinde](https://github.com/mraxays)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024  [Mr Akshay Shinde](https://github.com/mraxays)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,410 +1,410 @@
-![License](https://img.shields.io/badge/License-MIT-ff932e)
-![Release](https://img.shields.io/github/v/release/mraxays/clipxjs?color=ff7a5e)
-
-# ClipX.js -Maximize Clipboard Power with Minimal Size
-
-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.
-
----
-
-## Official Website
-
-For more information about this project, please visit our official website: [ClipX](https://clipx.dzr.app/)
-
----
-
-## Table of Contents 📑
-
-1. [Why Choose ClipX.js?](#why-choose-clipxjs)
-   - [Lightweight & Fast](#lightweight--fast)
-   - [Built-in Feedback](#built-in-feedback)
-   - [Flexible Customization](#flexible-customization)
-   - [Easy Integration](#easy-integration)
-   - [Robust Error Handling](#robust-error-handling)
-2. [Installation](#installation)
-   - [Via NPM](#via-npm)
-   - [Via CDN](#via-cdn)
-3. [Initializing ClipX.js](#initializing-clipxjs)
-   - [Basic Initialization](#basic-initialization)
-   - [Configuration Options](#configuration-options)
-4. [Attaching ClipX Functionality](#attaching-clipx-functionality)
-   - [Example: Using Data Attributes](#example-using-data-attributes)
-   - [Example: Using Class Names](#example-using-class-names)
-5. [Attributes Overview](#attributes-overview)
-   - [`data-clipx-target`](#data-clipx-target)
-   - [`data-clipx-text`](#data-clipx-text)
-   - [`data-clipx-cut`](#data-clipx-cut)
-   - [`data-clipx-msg`](#data-clipx-msg)
-   - [`data-clipx-toast`](#data-clipx-toast)
-   - [`data-clipx-disable-msg`](#data-clipx-disable-msg)
-   - [`data-clipx-disable-toast`](#data-clipx-disable-toast)
-   - [`data-clipx-toast-position`](#data-clipx-toast-position)
-   - [`data-clipx-duration`](#data-clipx-duration)
-6. [Example](#example)
-7. [Demo](#demo--get-start-code)
-
----
-
-## Why Choose ClipX.js?
-
-### Lightweight & Fast
-
-- At only 2KB, ClipX.js is smaller and faster than most clipboard libraries.
-
-### Built-in Feedback
-
-- Includes customizable toast notifications for clipboard actions—no need for additional UI libraries.
-
-### Flexible Customization
-
-- Easily style toasts, control message display, and integrate seamlessly with your app's design.
-
-### Easy Integration
-
-- Simple API with minimal setup, ensuring broad compatibility across modern and older browsers.
-
-### Robust Error Handling
-
-- Provides clear, customizable error feedback to enhance user experience and simplify debugging.
-
----
-
-## Installation
-
-### Via NPM
-
-```bash
-npm i clipxjs
-```
-
-### Via CDN
-
-Use only one `CDN`
-
-**jsdelivr**
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
-```
-
-**OR**
-
-**unpkg**
-
-```html
-<script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>
-```
-
----
-
-## Initializing ClipX.js
-
-To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:
-
-## Basic Initialization
-
-```javascript
-/* Initialize ClipX.js instance */
-var clipx = new clipx();
-```
-
-## Configuration Options
-
-### 1. Disable Text Content Change Globally
-
-To prevent the text content of elements from changing globally, set the `msg` property to `true`. Otherwise, set it to `false` to enable text content change.
-
-```javascript
-clipx.disable.msg = false; // Set to true to disable text content change globally
-```
-
-### 2. Disable Toast Notifications Globally
-
-To prevent toast notifications from showing globally, set the `toast` property to `true`. Otherwise, set it to `false` to enable toast notifications.
-
-```javascript
-clipx.disable.toast = false; // Set to true to disable toast notifications globally
-```
-
-### 3. Set Custom Styles for Toast Notifications
-
-Customize the appearance of toast notifications by providing CSS styles. For example, the following configuration sets a dark background with white text, padding, and rounded corners.
-
-```javascript
-clipx.setCustomStyles({
-  toast:
-    "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
-});
-```
-
-### 4. Hide SVG Icon
-
-To hide Svg Icon from toast
-
-```css
-.clipx-js-svg-icon {
-  display: none;
-}
-```
-
-## Attaching ClipX Functionality
-
-To bind ClipX.js functionality to elements, use the `attach` method with appropriate selectors. This method will enable clipboard operations on elements with the specified attributes or classes.
-
-### Example: Using Data Attributes
-
-Apply ClipX.js to elements with `data-clipx-text` or `data-clipx-target` attributes.
-
-```javascript
-clipx.attach("[data-clipx-text], [data-clipx-target]");
-```
-
-### Example: Using Class Names
-
-Alternatively, apply ClipX.js to elements with specific classes.
-
-```javascript
-clipx.attach(".clipx, .copy-btn, .your-class");
-```
-
----
-
-## Attributes Overview
-
-### This All Are Attributes
-
-- **`data-clipx-target`**: Element selector for text source.
-- **`data-clipx-text`**: Static text to copy or cut.
-- **`data-clipx-cut`**: Toggle cut operation.
-- **`data-clipx-msg`**: Custom success message.
-- **`data-clipx-toast`**: Show only toast, no text change.
-- **`data-clipx-disable-msg`**: Disable element text change.
-- **`data-clipx-disable-toast`**: Disable toast notification.
-- **`data-clipx-toast-position`**: Position of the toast (top/bottom).
-- **`data-clipx-duration`**: Duration of toast visibility.
-
----
-
-## Example
-
-### `data-clipx-target`
-
-**Description:** Specifies the target element whose text will be copied to the clipboard when the button is clicked.
-
-**Example:**
-
-```html
-<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
-<p id="text-to-copy">This is the text to be copied.</p>
-```
-
-### `data-clipx-text`
-
-**Description:** Defines a static text string that will be copied to the clipboard when the button is clicked.
-
-**Example:**
-
-```html
-<button class="copy-btn" data-clipx-text="Static text to copy">
-  Copy Static Text
-</button>
-```
-
-### `data-clipx-cut`
-
-**Description:** Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.
-
-**Example:**
-
-```html
-<textarea id="text-to-cut">This text will be cut.</textarea>
-<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>
-  Cut Text
-</button>
-```
-
-### `data-clipx-msg`
-
-**Description:** Copies the specified text to the clipboard and shows a toast notification with a custom message.
-
-**Example:**
-
-```html
-<button
-  class="copy-btn"
-  data-clipx-text="Another static text"
-  data-clipx-msg="Text copied successfully!"
->
-  Copy with Custom Message
-</button>
-```
-
-### `data-clipx-toast`
-
-**Description:** Displays a toast notification with the copied text. The button text remains unchanged.
-
-**Example:**
-
-```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>
-  Copy with Toast Only
-</button>
-```
-
-### `data-clipx-disable-msg`
-
-**Description:** Shows a toast notification without changing the button's text content.
-
-**Example:**
-
-```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>
-  Copy with Toast Only, No Text Change
-</button>
-```
-
-### `USE data-clipx-disable-toast & data-clipx-disable-msg`
-
-**Description:** Copies the specified text to the clipboard without showing a toast notification And Changing Text Contents.
-
-**Example:**
-
-```html
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-disable-toast
-  data-clipx-disable-msg
->
-  Copy without Toast & with Change Text
-</button>
-```
-
-### `data-clipx-disable-toast`
-
-**Description:** Copies the specified text to the clipboard without showing a toast notification.
-
-**Example:**
-
-```html
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-disable-toast
->
-  Copy without Toast
-</button>
-```
-
-### `data-clipx-toast-position`
-
-**Description:** Defines the position of the toast notification (top or bottom).
-
-**Example:**
-
-```html
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-toast
-  data-clipx-toast-position="top"
->
-  Copy with Toast on Top
-</button>
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-toast
-  data-clipx-toast-position="bottom"
->
-  Copy with Toast on Bottom
-</button>
-```
-
-### `data-clipx-duration`
-
-**Description:** Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.
-
-**Example:**
-
-```html
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-toast
-  data-clipx-duration="3000"
->
-  Copy with 3 Seconds Toast
-</button>
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-duration="3000"
->
-  Copy with 3 Seconds Toast & Content Change
-</button>
-<button
-  class="copy-btn"
-  data-clipx-text="Text to copy"
-  data-clipx-disable-toast
-  data-clipx-duration="3000"
->
-  Copy 3 sec Content Change
-</button>
-```
-
----
-
-## Demo || Get Start Code
-
-```html
-<h1>ClipX.js Demo</h1>
-
-<button
-  class="copy-btn"
-  data-clipx-text="Static text to copy"
-  data-clipx-msg="Static text copied!"
->
-  Copy Static Text
-</button>
-
-<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>
-  Cut Text
-</button>
-<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
-
-<p id="text-to-copy">This text will be cut and copied to the clipboard.</p>
-
-<button
-  class="copy-btn"
-  data-clipx-text="Another static text"
-  data-clipx-toast
-  data-clipx-toast-position="bottom"
->
-  Copy with Toast Only
-</button>
-
-<button
-  class="copy-btn"
-  data-clipx-text="Text with 5 seconds toast"
-  data-clipx-toast
-  data-clipx-duration="5000"
->
-  Copy with 5 Seconds Toast
-</button>
-
-<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
-<script>
-  // Initialize ClipX.js instance
-  var clipx = new clipx();
-
-  // Optional: Set custom styles for toast notifications
-  clipx.setCustomStyles({
-    toast:
-      "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
-  });
-
-  // Attach ClipX.js functionality to elements
-  clipx.attach("[data-clipx-text], [data-clipx-target]");
-</script>
-```
+![License](https://img.shields.io/badge/License-MIT-ff932e)
+![Release](https://img.shields.io/github/v/release/mraxays/clipxjs?color=ff7a5e)
+
+# ClipX.js -Maximize Clipboard Power with Minimal Size
+
+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.
+
+---
+
+## Official Website
+
+For more information about this project, please visit our official website: [ClipX](https://clipx.js.org/)
+
+---
+
+## Table of Contents 📑
+
+1. [Why Choose ClipX.js?](#why-choose-clipxjs)
+   - [Lightweight & Fast](#lightweight--fast)
+   - [Built-in Feedback](#built-in-feedback)
+   - [Flexible Customization](#flexible-customization)
+   - [Easy Integration](#easy-integration)
+   - [Robust Error Handling](#robust-error-handling)
+2. [Installation](#installation)
+   - [Via NPM](#via-npm)
+   - [Via CDN](#via-cdn)
+3. [Initializing ClipX.js](#initializing-clipxjs)
+   - [Basic Initialization](#basic-initialization)
+   - [Configuration Options](#configuration-options)
+4. [Attaching ClipX Functionality](#attaching-clipx-functionality)
+   - [Example: Using Data Attributes](#example-using-data-attributes)
+   - [Example: Using Class Names](#example-using-class-names)
+5. [Attributes Overview](#attributes-overview)
+   - [`data-clipx-target`](#data-clipx-target)
+   - [`data-clipx-text`](#data-clipx-text)
+   - [`data-clipx-cut`](#data-clipx-cut)
+   - [`data-clipx-msg`](#data-clipx-msg)
+   - [`data-clipx-toast`](#data-clipx-toast)
+   - [`data-clipx-disable-msg`](#data-clipx-disable-msg)
+   - [`data-clipx-disable-toast`](#data-clipx-disable-toast)
+   - [`data-clipx-toast-position`](#data-clipx-toast-position)
+   - [`data-clipx-duration`](#data-clipx-duration)
+6. [Example](#example)
+7. [Demo](#demo--get-start-code)
+
+---
+
+## Why Choose ClipX.js?
+
+### Lightweight & Fast
+
+- At only 2KB, ClipX.js is smaller and faster than most clipboard libraries.
+
+### Built-in Feedback
+
+- Includes customizable toast notifications for clipboard actions—no need for additional UI libraries.
+
+### Flexible Customization
+
+- Easily style toasts, control message display, and integrate seamlessly with your app's design.
+
+### Easy Integration
+
+- Simple API with minimal setup, ensuring broad compatibility across modern and older browsers.
+
+### Robust Error Handling
+
+- Provides clear, customizable error feedback to enhance user experience and simplify debugging.
+
+---
+
+## Installation
+
+### Via NPM
+
+```bash
+npm i clipxjs
+```
+
+### Via CDN
+
+Use only one `CDN`
+
+**jsdelivr**
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
+```
+
+**OR**
+
+**unpkg**
+
+```html
+<script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>
+```
+
+---
+
+## Initializing ClipX.js
+
+To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:
+
+## Basic Initialization
+
+```javascript
+/* Initialize ClipX.js instance */
+var clipx = new clipx();
+```
+
+## Configuration Options
+
+### 1. Disable Text Content Change Globally
+
+To prevent the text content of elements from changing globally, set the `msg` property to `true`. Otherwise, set it to `false` to enable text content change.
+
+```javascript
+clipx.disable.msg = false; // Set to true to disable text content change globally
+```
+
+### 2. Disable Toast Notifications Globally
+
+To prevent toast notifications from showing globally, set the `toast` property to `true`. Otherwise, set it to `false` to enable toast notifications.
+
+```javascript
+clipx.disable.toast = false; // Set to true to disable toast notifications globally
+```
+
+### 3. Set Custom Styles for Toast Notifications
+
+Customize the appearance of toast notifications by providing CSS styles. For example, the following configuration sets a dark background with white text, padding, and rounded corners.
+
+```javascript
+clipx.setCustomStyles({
+  toast:
+    "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
+});
+```
+
+### 4. Hide SVG Icon
+
+To hide Svg Icon from toast
+
+```css
+.clipx-js-svg-icon {
+  display: none;
+}
+```
+
+## Attaching ClipX Functionality
+
+To bind ClipX.js functionality to elements, use the `attach` method with appropriate selectors. This method will enable clipboard operations on elements with the specified attributes or classes.
+
+### Example: Using Data Attributes
+
+Apply ClipX.js to elements with `data-clipx-text` or `data-clipx-target` attributes.
+
+```javascript
+clipx.attach("[data-clipx-text], [data-clipx-target]");
+```
+
+### Example: Using Class Names
+
+Alternatively, apply ClipX.js to elements with specific classes.
+
+```javascript
+clipx.attach(".clipx, .copy-btn, .your-class");
+```
+
+---
+
+## Attributes Overview
+
+### This All Are Attributes
+
+- **`data-clipx-target`**: Element selector for text source.
+- **`data-clipx-text`**: Static text to copy or cut.
+- **`data-clipx-cut`**: Toggle cut operation.
+- **`data-clipx-msg`**: Custom success message.
+- **`data-clipx-toast`**: Show only toast, no text change.
+- **`data-clipx-disable-msg`**: Disable element text change.
+- **`data-clipx-disable-toast`**: Disable toast notification.
+- **`data-clipx-toast-position`**: Position of the toast (top/bottom).
+- **`data-clipx-duration`**: Duration of toast visibility.
+
+---
+
+## Example
+
+### `data-clipx-target`
+
+**Description:** Specifies the target element whose text will be copied to the clipboard when the button is clicked.
+
+**Example:**
+
+```html
+<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
+<p id="text-to-copy">This is the text to be copied.</p>
+```
+
+### `data-clipx-text`
+
+**Description:** Defines a static text string that will be copied to the clipboard when the button is clicked.
+
+**Example:**
+
+```html
+<button class="copy-btn" data-clipx-text="Static text to copy">
+  Copy Static Text
+</button>
+```
+
+### `data-clipx-cut`
+
+**Description:** Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.
+
+**Example:**
+
+```html
+<textarea id="text-to-cut">This text will be cut.</textarea>
+<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>
+  Cut Text
+</button>
+```
+
+### `data-clipx-msg`
+
+**Description:** Copies the specified text to the clipboard and shows a toast notification with a custom message.
+
+**Example:**
+
+```html
+<button
+  class="copy-btn"
+  data-clipx-text="Another static text"
+  data-clipx-msg="Text copied successfully!"
+>
+  Copy with Custom Message
+</button>
+```
+
+### `data-clipx-toast`
+
+**Description:** Displays a toast notification with the copied text. The button text remains unchanged.
+
+**Example:**
+
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>
+  Copy with Toast Only
+</button>
+```
+
+### `data-clipx-disable-msg`
+
+**Description:** Shows a toast notification without changing the button's text content.
+
+**Example:**
+
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>
+  Copy with Toast Only, No Text Change
+</button>
+```
+
+### `USE data-clipx-disable-toast & data-clipx-disable-msg`
+
+**Description:** Copies the specified text to the clipboard without showing a toast notification And Changing Text Contents.
+
+**Example:**
+
+```html
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-disable-toast
+  data-clipx-disable-msg
+>
+  Copy without Toast & with Change Text
+</button>
+```
+
+### `data-clipx-disable-toast`
+
+**Description:** Copies the specified text to the clipboard without showing a toast notification.
+
+**Example:**
+
+```html
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-disable-toast
+>
+  Copy without Toast
+</button>
+```
+
+### `data-clipx-toast-position`
+
+**Description:** Defines the position of the toast notification (top or bottom).
+
+**Example:**
+
+```html
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-toast
+  data-clipx-toast-position="top"
+>
+  Copy with Toast on Top
+</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-toast
+  data-clipx-toast-position="bottom"
+>
+  Copy with Toast on Bottom
+</button>
+```
+
+### `data-clipx-duration`
+
+**Description:** Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.
+
+**Example:**
+
+```html
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-toast
+  data-clipx-duration="3000"
+>
+  Copy with 3 Seconds Toast
+</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-duration="3000"
+>
+  Copy with 3 Seconds Toast & Content Change
+</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-disable-toast
+  data-clipx-duration="3000"
+>
+  Copy 3 sec Content Change
+</button>
+```
+
+---
+
+## Demo || Get Start Code
+
+```html
+<h1>ClipX.js Demo</h1>
+
+<button
+  class="copy-btn"
+  data-clipx-text="Static text to copy"
+  data-clipx-msg="Static text copied!"
+>
+  Copy Static Text
+</button>
+
+<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>
+  Cut Text
+</button>
+<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
+
+<p id="text-to-copy">This text will be cut and copied to the clipboard.</p>
+
+<button
+  class="copy-btn"
+  data-clipx-text="Another static text"
+  data-clipx-toast
+  data-clipx-toast-position="bottom"
+>
+  Copy with Toast Only
+</button>
+
+<button
+  class="copy-btn"
+  data-clipx-text="Text with 5 seconds toast"
+  data-clipx-toast
+  data-clipx-duration="5000"
+>
+  Copy with 5 Seconds Toast
+</button>
+
+<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
+<script>
+  // Initialize ClipX.js instance
+  var clipx = new clipx();
+
+  // Optional: Set custom styles for toast notifications
+  clipx.setCustomStyles({
+    toast:
+      "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
+  });
+
+  // Attach ClipX.js functionality to elements
+  clipx.attach("[data-clipx-text], [data-clipx-target]");
+</script>
+```

package/dist/clipx.min.js

@@ -1,9 +1,2 @@
-/* 
-    ClipX JS
-    https://clipx.dzr.app
-    GitHub: https://github.com/mraxays/clipxjs
-    Version: 1.2.1
-    Copyright (c) 2025 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,25 +1,39 @@
-{
-  "name": "clipxjs",
-  "version": "1.2.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": {
-    "build": "webpack --config bundler/webpack.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mraxays/clipxjs.git"
-  },
-  "keywords": ["clipboard","copy","cut","paste","toast","notifications","clipx","clipxjs","lightweight","UI","customizable","performance","cross-browser","front-end"
-],
-  "author": "@mrakshayas",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/mraxays/clipxjs/issues"
-  },
-  "homepage": "https://clipx.dzr.app/"
-}
+{
+  "name": "clipxjs",
+  "version": "1.3.0",
+  "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": {
+    "build": "webpack --config bundler/webpack.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mraxays/clipxjs.git"
+  },
+  "keywords": [
+    "clipboard",
+    "copy",
+    "cut",
+    "paste",
+    "toast",
+    "notifications",
+    "clipx",
+    "clipxjs",
+    "lightweight",
+    "UI",
+    "customizable",
+    "performance",
+    "cross-browser",
+    "front-end"
+  ],
+  "author": "@mrakshayas",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mraxays/clipxjs/issues"
+  },
+  "homepage": "https://clipx.js.org/"
+}

package/src/clipx.min.js

@@ -0,0 +1 @@
+(function(t,e){var o=e();"object"==typeof module&&module.exports&&(module.exports=o),"undefined"!=typeof window&&(window.clipx=window.ClipX=o)})(0,function(){"use strict";function t(){this.disable={msg:!1,toast:!1},this.customStyles={},this.formatters=Object.assign({},h),this._sel=[],this._fn=null,this._t={}}var e="undefined"!=typeof document&&document,o="undefined"!=typeof navigator?navigator:{},r="[data-clipx-text],[data-clipx-target],[data-clipx-paste]",s=(t,e)=>'<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="'+e+'"/></svg>',i={ok:s("#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:s("#e70000","M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z")},n=".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}}",a=t=>t&&t.parentNode&&t.parentNode.removeChild(t),c=t=>/^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName),l=t=>c(t)?t.value:t.textContent,p=(t,e,o)=>t.dispatchEvent(o?new CustomEvent(e,{bubbles:!0,detail:o}):new Event(e,{bubbles:!0})),d=(t,e)=>{c(t)?(t.value=e,p(t,"input"),p(t,"change")):t.textContent=e},u=t=>new Promise((o,r)=>{var s=e.activeElement,i=e.createElement("textarea"),n=!1;i.value=t,i.readOnly=!0,i.style.cssText="position:fixed;top:0;opacity:0",e.body.appendChild(i),i.select();try{i.setSelectionRange(0,t.length),n=e.execCommand("copy")}catch(t){}a(i),s&&s.focus&&s.focus(),n?o():r(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,"")},m=t.prototype;return t.version="1.3.0",m.addFormatter=function(t,e){if("function"!=typeof e)throw new TypeError("Formatter must be a function");return this.formatters[String(t).toLowerCase()]=e,this},m.format=function(t,e){return t=null==t?"":String(t),(Array.isArray(e)?e:String(e||"").split(",")).forEach(e=>{e=String(e).trim().toLowerCase();var o=this.formatters[e];o?t=String(o(t)):e&&console.warn("ClipX: unknown format '"+e+"'")}),t},m.copyText=function(t){return t=null==t?"":String(t),o.clipboard&&o.clipboard.writeText?o.clipboard.writeText(t).catch(()=>u(t)):u(t)},m.cutText=function(t,e){return this.copyText(t).then(()=>{e&&d(e,"")})},m.copyFromElement=function(t,e){var o=this.format(l(t),e);return o?this.copyText(o):Promise.reject(Error("Nothing to copy."))},m.cutFromElement=function(t,e){var o=this.format(l(t),e);return o?this.cutText(o,t):Promise.reject(Error("Nothing to copy."))},m.pasteText=function(){return o.clipboard&&o.clipboard.readText?o.clipboard.readText():Promise.reject(Error("Paste is not supported here."))},m.pasteToElement=function(t,e){return this.pasteText().then(o=>(o=this.format(o,e),d(t,o),o))},m.attach=function(t){return e?(t=t||r,this._sel.indexOf(t)<0&&this._sel.push(t),this._fn||e.addEventListener("click",this._fn=(t=>{var e=t.target;e&&1!=e.nodeType&&(e=e.parentElement),e=e&&e.closest&&e.closest(this._sel.join(",")),e&&this._run(e)})),this):this},m.detach=function(){return this._fn&&e.removeEventListener("click",this._fn),this._fn=null,this._sel=[],this},m._run=function(t){if(!t.__cx){var o,r,s=e=>t.getAttribute("data-clipx-"+e),i=e=>t.hasAttribute("data-clipx-"+e),n=s("format"),a=i("cut"),c="copy",l=parseInt(s("duration"),10);try{if(s("paste")){if(c="paste",!(r=e.querySelector(s("paste"))))throw Error("Paste target not found");o=this.pasteToElement(r,n)}else if(s("target")){if(!(r=e.querySelector(s("target"))))throw Error("Target not found");c=a?"cut":"copy",o=a?this.cutFromElement(r,n):this.copyFromElement(r,n)}else{if(!i("text"))throw Error("Add data-clipx-target, -text or -paste");if(!(r=this.format(s("text"),n)))throw Error("Nothing to copy.");o=this.copyText(r)}}catch(e){return this.onError(t,e)}t.__cx=1,o.then(()=>this.onSuccess(t,s("msg"),i("toast"),i("disable-msg"),i("disable-toast"),s("toast-position")||"bottom",l>0?l:1500,c),e=>this.onError(t,e)).then(()=>{t.__cx=0})}},m.onSuccess=function(t,e,o,r,s,i,n,a){e=e||("paste"==a?"Pasted!":"Copied!"),o||r||this.disable.msg||(void 0===t.__o&&(t.__o=t.innerHTML),t.textContent=e,clearTimeout(t.__t),t.__t=setTimeout(()=>{t.innerHTML=t.__o,t.__o=void 0},n)),s||this.disable.toast||this._toast(e,"ok",i,n),p(t,"clipx:success",{type:a||"copy"})},m.onError=function(t,e){console.error("ClipX:",e),this.disable.toast||this._toast(e&&"Nothing to copy."==e.message?e.message:"Failed to copy!","err","bottom",1500),p(t,"clipx:error",{error:e})},m._toast=function(t,o,r,s){if(!e.getElementById("clipx-js-styles")){var c=e.createElement("style");c.id="clipx-js-styles",c.textContent=n,(e.head||e.documentElement).appendChild(c)}r="top"==r?"top":"bottom",a(this._t[r]);var l=e.createElement("div"),p=e.createElement("span");l.className="clipx-toast "+r+("err"==o?" error":""),l.setAttribute("role","err"==o?"alert":"status"),l.innerHTML=i[o],p.textContent=t,l.appendChild(p),l.style.cssText=(this.customStyles.toast||"")+";"+("err"==o&&this.customStyles.error||""),e.body.appendChild(l),this._t[r]=l,setTimeout(()=>l.classList.add("clipx-show"),10),setTimeout(()=>{l.classList.remove("clipx-show"),setTimeout(()=>{a(l),this._t[r]==l&&(this._t[r]=null)},300)},s)},m.setCustomStyles=function(t){return this.customStyles=t||{},this},t.ClipX=t,t});

package/src/clipx.js

@@ -1,275 +0,0 @@
-(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,
-    };
-    this.customStyles = {}; // Store custom styles for the toast notifications
-  }
-
-  // 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();
-    }
-  };
-
-  // 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
-      }
-    });
-  };
-
-  // 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);
-  };
-
-  // 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);
-  };
-
-  // 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)
-    );
-  };
-
-  // 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
-      );
-    }
-  };
-
-  // 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);
-  };
-
-  // Method to set custom styles for toast notifications
-  clipx.prototype.setCustomStyles = function (styles) {
-    this.customStyles = styles;
-  };
-
-  // 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%);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) translateX(-50%);
-    }
-}
-
-@keyframes fadeOut {
-    from {
-        opacity: 1;
-        transform: translateY(0) translateX(-50%);
-    }
-    to {
-        opacity: 0;
-        transform: translateY(10px) translateX(-50%);
-    }
-}`;
-  document.head.appendChild(style);
-})(this);