@kelvininc/ui-components
Version:
Kelvin UI Components
82 lines (75 loc) • 4.76 kB
JavaScript
import { r as registerInstance, h, H as Host } from './index-D-JVwta2.js';
import { o as offset } from './floating-ui.dom-CJTtq_QG.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { b as ETooltipPosition } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { a as copyTextToClipboard } from './clipboard.helper-C4kUacG4.js';
import './isNil-DjSNdVAB.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** @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" }))))));
}
};
KvCopyToClipboard.style = copyToClipboardCss;
export { KvCopyToClipboard as kv_copy_to_clipboard };