@kelvininc/ui-components
Version:
Kelvin UI Components
161 lines (160 loc) • 6.81 kB
JavaScript
import { Host, h } from "@stencil/core";
import { ECopyToClipboardState } from "./copy-to-clipboard.types";
import { ICON_CONFIGS, STATE_TRANSITION_DURATION_MS, DEFAULT_TOOLTIP_CONFIG, DEFAULT_TOOLTIP_DELAY, UNABLE_TO_COPY_ERROR } from "./copy-to-clipboard.config";
import { copyTextToClipboard } from "../../utils/clipboard.helper";
import { getTooltipText } from "./copy-to-clipboard.utils";
/**
* @part content - The container for the content
* @part icon - The copy icon
*/
export class KvCopyToClipboard {
constructor() {
/** @inheritdoc */
this.tooltipDelay = DEFAULT_TOOLTIP_DELAY;
/** @inheritdoc */
this.tooltipConfig = DEFAULT_TOOLTIP_CONFIG;
this.copyState = ECopyToClipboardState.ReadyToCopy;
this.onTextCopy = async (ev) => {
ev.stopPropagation();
if (this.copyState === ECopyToClipboardState.Copied)
return;
try {
await copyTextToClipboard(this.copiableText);
this.copyState = ECopyToClipboardState.Copied;
setTimeout(() => (this.copyState = ECopyToClipboardState.ReadyToCopy), STATE_TRANSITION_DURATION_MS);
}
catch (_a) {
throw new Error(UNABLE_TO_COPY_ERROR);
}
};
}
get tooltipText() {
return getTooltipText(this.copyState, this.tooltipSuffix);
}
render() {
return (h(Host, { key: '7f1bc9047fef424bbe5a5cc1ca2445b413009f21' }, h("kv-tooltip", { key: '34049014fcfcb7ee4e17b4f00057b18e66a268f8', text: this.tooltipText, options: this.tooltipConfig, delay: this.tooltipDelay, onClick: this.onTextCopy }, h("div", { key: 'bd02b999a816aae80d833cb4ae95f9bd17c74e92', part: "content", class: "copy-to-clipboard-container" }, h("slot", { key: '3726b84a1700251303b31496b7de2d0b7fbcb99e' }), h("div", { key: '6d3b3f5d2c1e80728b8de66ed5871b32fed6ef05', class: {
'state-icon': true,
'state-icon--success': this.copyState === ECopyToClipboardState.Copied
} }, h("kv-icon", { key: '74fdee8ab603a3bee2a4e087fd78b8549682be9a', name: ICON_CONFIGS[this.copyState], part: "icon" }))))));
}
static get is() { return "kv-copy-to-clipboard"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["copy-to-clipboard.scss"]
};
}
static get styleUrls() {
return {
"$": ["copy-to-clipboard.css"]
};
}
static get properties() {
return {
"copiableText": {
"type": "string",
"attribute": "copiable-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The text to copy to the clipboard when clicking"
},
"getter": false,
"setter": false,
"reflect": true
},
"tooltipSuffix": {
"type": "string",
"attribute": "tooltip-suffix",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The suffix to show on the `Copy` tooltip before copying"
},
"getter": false,
"setter": false,
"reflect": true
},
"tooltipDelay": {
"type": "number",
"attribute": "tooltip-delay",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Delay to show tooltip in milliseconds."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_TOOLTIP_DELAY"
},
"tooltipConfig": {
"type": "unknown",
"attribute": "tooltip-config",
"mutable": false,
"complexType": {
"original": "Partial<ComputePositionConfig>",
"resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ComputePositionConfig": {
"location": "import",
"path": "@floating-ui/dom",
"id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Object with tooltip position options"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_TOOLTIP_CONFIG"
}
};
}
static get states() {
return {
"copyState": {}
};
}
}