@kelvininc/ui-components
Version:
Kelvin UI Components
123 lines (115 loc) • 6.16 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { o as offset, d as defineCustomElement$4 } from './p-BIWUEm1f.js';
import { b as EIconName } from './p-DBphUUgi.js';
import { b as ETooltipPosition } from './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { a as copyTextToClipboard } from './p-rHmdvoey.js';
import { d as defineCustomElement$5 } from './p-B41PGLQm.js';
import { d as defineCustomElement$3 } from './p-GHnCHOez.js';
import { d as defineCustomElement$2 } from './p-BuaFqlfN.js';
var ECopyToClipboardState;
(function (ECopyToClipboardState) {
ECopyToClipboardState["ReadyToCopy"] = "ready-to-copy";
ECopyToClipboardState["Copied"] = "copied";
})(ECopyToClipboardState || (ECopyToClipboardState = {}));
const ICON_CONFIGS = {
[ECopyToClipboardState.ReadyToCopy]: EIconName.CopyClipboard,
[ECopyToClipboardState.Copied]: EIconName.Success
};
const DEFAULT_TOOLTIP_CONFIG = {
placement: ETooltipPosition.BottomEnd,
middleware: [
offset({
mainAxis: 4,
crossAxis: -8
})
]
};
const DEFAULT_TOOLTIP_DELAY = 500;
const STATE_TRANSITION_DURATION_MS = 2000;
const UNABLE_TO_COPY_ERROR = 'Unable to copy to clipboard';
const getTooltipText = (state, suffix) => {
if (state === ECopyToClipboardState.Copied)
return 'Copied';
return `Copy ${suffix ? suffix : ''}`.trim();
};
const copyToClipboardCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--container-width:100%;--container-padding:var(--kv-spacing-2x, 8px);--container-hover-background-color:kv-color(\"neutral-6\");--container-gap:var(--kv-spacing-2x, 8px);--icon-start-opacity:0;--icon-color-default:var(--kv-neutral-2, #e5e5e5);--icon-color-success:var(--kv-success, #05a357);--icon-background-color-success:var(--kv-neutral-0, #fff);--icon-size:16px}.copy-to-clipboard-container{width:var(--container-width);display:flex;justify-content:space-between;align-items:center;border-radius:4px;gap:var(--container-gap);padding:var(--container-padding);box-sizing:border-box;transition:background-color 0.2s ease-in-out, opacity 0.25s ease-in-out}.copy-to-clipboard-container:hover{cursor:pointer;background-color:var(--container-hover-background-color)}.copy-to-clipboard-container:hover .state-icon kv-icon{opacity:1}.copy-to-clipboard-container .state-icon kv-icon{--icon-height:var(--icon-size);--icon-width:var(--icon-size);--icon-color:var(--icon-color-default);opacity:var(--icon-start-opacity)}.copy-to-clipboard-container .state-icon--success kv-icon{--icon-color:var(--icon-color-success);--icon-background-color:var(--icon-background-color-success)}";
const KvCopyToClipboard$1 = /*@__PURE__*/ proxyCustomElement(class KvCopyToClipboard extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** @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: 'a5d2d5b38e1f0f0ce1161ba1194560f5c9f84ae7' }, h("kv-tooltip", { key: '410df1ea814f846522a0bc680edf2856125bde91', text: this.tooltipText, options: this.tooltipConfig, delay: this.tooltipDelay, onClick: this.onTextCopy }, h("div", { key: '3074a8864deaf1daa4234ed267487fb3dfd7fcd9', part: "content", class: "copy-to-clipboard-container" }, h("slot", { key: '282f41272909ce3d2e6912255de4b898e2defb68' }), h("div", { key: 'febbbee3dd524d835efbe3389e3e37af812d1e56', class: {
'state-icon': true,
'state-icon--success': this.copyState === ECopyToClipboardState.Copied
} }, h("kv-icon", { key: 'a08a9c182cee0f7b40ac2ffc9e0eb6d4b358d91c', name: ICON_CONFIGS[this.copyState], part: "icon" }))))));
}
static get style() { return copyToClipboardCss; }
}, [1, "kv-copy-to-clipboard", {
"copiableText": [513, "copiable-text"],
"tooltipSuffix": [513, "tooltip-suffix"],
"tooltipDelay": [514, "tooltip-delay"],
"tooltipConfig": [16, "tooltip-config"],
"copyState": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-copy-to-clipboard", "kv-icon", "kv-portal", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-copy-to-clipboard":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvCopyToClipboard$1);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvCopyToClipboard = KvCopyToClipboard$1;
const defineCustomElement = defineCustomElement$1;
export { KvCopyToClipboard, defineCustomElement };