@exmg/exm-copy-to-clipboard 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-copy-to-clipboard/dist/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 ExmCopyToClipboard 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': ExmCopyToClipboard;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-copy-to-clipboard/dist/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 ExmCopyToClipboard = class ExmCopyToClipboard 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>
+    `;
+    }
+};
+ExmCopyToClipboard.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmCopyToClipboard.prototype, "value", void 0);
+__decorate([
+    state()
+], ExmCopyToClipboard.prototype, "isCopySupported", void 0);
+__decorate([
+    state()
+], ExmCopyToClipboard.prototype, "bubbles", void 0);
+__decorate([
+    query('#clipboard')
+], ExmCopyToClipboard.prototype, "clipboard", void 0);
+ExmCopyToClipboard = __decorate([
+    customElement('exm-copy-to-clipboard')
+], ExmCopyToClipboard);
+export { ExmCopyToClipboard };
+//# sourceMappingURL=exm-copy-to-clipboard.js.map

package/.rollup.cache/root/repo/packages/exm-copy-to-clipboard/dist/index.d.ts

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

package/.rollup.cache/root/repo/packages/exm-copy-to-clipboard/dist/index.js

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

package/.rollup.cache/root/repo/packages/exm-copy-to-clipboard/dist/styles/exm-copy-to-clipboard-styles-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-copy-to-clipboard/dist/styles/exm-copy-to-clipboard-styles-css.js

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

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

@@ -1,8 +1,9 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { customElement, state, property, query } from 'lit/decorators.js';
+import { property, state, query, customElement } 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
@@ -118,5 +119,6 @@ __decorate([
 ExmCopyToClipboard = __decorate([
     customElement('exm-copy-to-clipboard')
 ], ExmCopyToClipboard);
+
 export { ExmCopyToClipboard };
-//# sourceMappingURL=exm-copy-to-clipboard.js.map
+//# sourceMappingURL=exm-copy-to-clipboard.js.map

package/dist/index.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-copy-to-clipboard",
-  "version": "1.1.36",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
+  "gitHead": "b5f4ed4f41d79e3cce85dc0c44181ef4413d7458"
 }