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/exmg-copy-to-clipboard-styles-css.js';
/**
* `<exmg-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
* <exmg-copy-to-clipboard value="mark@test.com">
* <paper-icon-button icon="content-copy"></paper-icon-button>
* </exmg-copy-to-clipboard>
* ```
*
* @customElement exmg-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('exmg-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('exmg-copy-to-clipboard')
], ExmgCopyToClipboard);
export { ExmgCopyToClipboard };
//# sourceMappingURL=exmg-copy-to-clipboard.js.map