@exmg/exm-copy-to-clipboard 1.0.0

package/README.md

@@ -0,0 +1,58 @@
+# `<exm-copy-to-clipboard>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-copy-to-clipboard.svg)](https://www.npmjs.com/package/@exmg/exm-copy-to-clipboard)
+
+# @exmg/exm-copy-to-clipboard
+
+Helper element to create icon/buttons that lets the user copy content to the clipboard. Just wrap it around
+the button or icon and set the value that needs to be copied.
+
+## Installation
+
+```sh
+npm install @exmg/exm-copy-to-clipboard
+```
+
+## Example Usage
+
+### Standard
+
+```html
+<exm-copy-to-clipboard value="mark@test.com">
+  <md-icon-button><md-icon>content-copy</md-icon></md-icon-button>
+</exm-copy-to-clipboard>
+```
+
+## API
+
+### Slots
+
+| Name      | Description                        |
+| --------- | ---------------------------------- |
+| _default_ | Button to handle copy to clipboard |
+
+### Properties/Attributes
+
+| Name    | Type     | Default | Description                              |
+| ------- | -------- | ------- | ---------------------------------------- |
+| `value` | `string` | _None_  | The value that gets copied and displayed |
+
+### Methods
+
+| Name     | Description                                       |
+| -------- | ------------------------------------------------- |
+| `toggle` | Toggles the opened state of the component         |
+| `show`   | Sets the opened state of the component to _true_  |
+| `hide`   | Sets the opened state of the component to _false_ |
+
+### Events
+
+_None_
+
+### CSS Custom Properties
+
+_None_
+
+## Additional references
+
+- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmgCopyToClipboard.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-copy-to-clipboard)

package/index.d.ts

@@ -0,0 +1,2 @@
+export { ExmgCopyToClipboard } from './src/exm-copy-to-clipboard.js';
+export { style as copyToClipboardStyles } from './src/styles/exm-copy-to-clipboard-styles-css.js';

package/index.js

@@ -0,0 +1,3 @@
+export { ExmgCopyToClipboard } from './src/exm-copy-to-clipboard.js';
+export { style as copyToClipboardStyles } from './src/styles/exm-copy-to-clipboard-styles-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@exmg/exm-copy-to-clipboard",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-copy-to-clipboard.js": "./src/exm-copy-to-clipboard.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "clipboard"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-copy-to-clipboard"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-copy-to-clipboard.d.ts

@@ -0,0 +1,49 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+/**
+ * `<exm-copy-to-clipboard>` Helper element to create icon/buttons that
+ * lets the user copy content to the clipboard. Just wrap it arround
+ * the button or icon and set the value that needs to be copied.
+ *
+ * ```html
+ *  <exm-copy-to-clipboard value="mark@test.com">
+ *    <md-icon-button icon="content-copy"><md-icon>content-copy</md-icon></md-icon-button>
+ *  </exm-copy-to-clipboard>
+ * ```
+ *
+ * @customElement exm-copy-to-clipboard
+ * @extends ExmgElement
+ */
+export declare class ExmgCopyToClipboard extends ExmgElement {
+    /**
+     * Value to be copied
+     * @type {String}
+     */
+    value?: string;
+    private isCopySupported;
+    protected bubbles: boolean;
+    clipboard?: HTMLElement;
+    private htmlElement?;
+    private handleCopy;
+    private _observer?;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    addClickListener(): void;
+    /**
+     * Copy the given value to the clipboard
+     * @private
+     */
+    private copyToClipboard;
+    /**
+     * Handle button tap event and trigger the actual copy to clipboard
+     */
+    handleCopyAction(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-copy-to-clipboard': ExmgCopyToClipboard;
+    }
+}

package/src/exm-copy-to-clipboard.js

@@ -0,0 +1,122 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { style } from './styles/exm-copy-to-clipboard-styles-css.js';
+/**
+ * `<exm-copy-to-clipboard>` Helper element to create icon/buttons that
+ * lets the user copy content to the clipboard. Just wrap it arround
+ * the button or icon and set the value that needs to be copied.
+ *
+ * ```html
+ *  <exm-copy-to-clipboard value="mark@test.com">
+ *    <md-icon-button icon="content-copy"><md-icon>content-copy</md-icon></md-icon-button>
+ *  </exm-copy-to-clipboard>
+ * ```
+ *
+ * @customElement exm-copy-to-clipboard
+ * @extends ExmgElement
+ */
+let ExmgCopyToClipboard = class ExmgCopyToClipboard extends ExmgElement {
+    constructor() {
+        super();
+        this.isCopySupported = false;
+        this.bubbles = false;
+        this.isCopySupported = !!document.queryCommandSupported('copy');
+        this.handleCopy = this.handleCopyAction.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Create an observer instance linked to the callback function
+        this._observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    this.addClickListener();
+                }
+            }
+        });
+        // Start observing the target node for configured mutations
+        this._observer.observe(this, { attributes: true, childList: true, subtree: false });
+    }
+    firstUpdated() {
+        this.addClickListener();
+        if (!this.isCopySupported && this.htmlElement) {
+            this.htmlElement.style.display = 'none';
+            this.dispatchEvent(new CustomEvent('copy-not-supported', { bubbles: this.bubbles, composed: true }));
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.htmlElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleCopy);
+        (_b = this._observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+        super.disconnectedCallback();
+    }
+    addClickListener() {
+        var _a, _b;
+        (_a = this.htmlElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleCopy);
+        const elements = this.querySelectorAll('*');
+        this.htmlElement = elements[0];
+        (_b = this.htmlElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.handleCopy);
+    }
+    /**
+     * Copy the given value to the clipboard
+     * @private
+     */
+    copyToClipboard() {
+        const clipboardNode = this.shadowRoot ? this.clipboard : null;
+        if (!clipboardNode) {
+            return;
+        }
+        clipboardNode.style.display = 'block';
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.selectNodeContents(clipboardNode);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        try {
+            document.execCommand('copy');
+            this.dispatchEvent(new CustomEvent('exm-copy-to-clipboard-copied', {
+                detail: this.value,
+                bubbles: this.bubbles,
+                composed: true,
+            }));
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('copy to clipboard failed', err);
+        }
+        selection.removeAllRanges();
+        clipboardNode.style.display = 'none';
+    }
+    /**
+     * Handle button tap event and trigger the actual copy to clipboard
+     */
+    handleCopyAction(e) {
+        this.copyToClipboard();
+        e.stopPropagation();
+    }
+    render() {
+        return html `
+      <slot></slot>
+      <span id="clipboard">${this.value}</span>
+    `;
+    }
+};
+ExmgCopyToClipboard.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmgCopyToClipboard.prototype, "value", void 0);
+__decorate([
+    state()
+], ExmgCopyToClipboard.prototype, "isCopySupported", void 0);
+__decorate([
+    state()
+], ExmgCopyToClipboard.prototype, "bubbles", void 0);
+__decorate([
+    query('#clipboard')
+], ExmgCopyToClipboard.prototype, "clipboard", void 0);
+ExmgCopyToClipboard = __decorate([
+    customElement('exm-copy-to-clipboard')
+], ExmgCopyToClipboard);
+export { ExmgCopyToClipboard };
+//# sourceMappingURL=exm-copy-to-clipboard.js.map

package/src/styles/exm-copy-to-clipboard-styles-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-copy-to-clipboard-styles-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:inline-block}#clipboard{display:none}`;
+export default style;
+//# sourceMappingURL=exm-copy-to-clipboard-styles-css.js.map

package/src/styles/exm-copy-to-clipboard-styles.scss

@@ -0,0 +1,6 @@
+:host {
+  display: inline-block;
+}
+#clipboard {
+  display: none;
+}