@kelvininc/ui-components
Version:
Kelvin UI Components
84 lines (76 loc) • 4.84 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var icon_types = require('./icon.types-B8lvUrX_.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var clipboard_helper = require('./clipboard.helper-D6u859AY.js');
require('./isNil-B-fGcnNC.js');
var ECopyToClipboardState;
(function (ECopyToClipboardState) {
ECopyToClipboardState["ReadyToCopy"] = "ready-to-copy";
ECopyToClipboardState["Copied"] = "copied";
})(ECopyToClipboardState || (ECopyToClipboardState = {}));
const ICON_CONFIGS = {
[ECopyToClipboardState.ReadyToCopy]: icon_types.EIconName.CopyClipboard,
[ECopyToClipboardState.Copied]: icon_types.EIconName.Success
};
const DEFAULT_TOOLTIP_CONFIG = {
placement: components.ETooltipPosition.BottomEnd,
middleware: [
floatingUi_dom.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) {
index.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 clipboard_helper.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 (index.h(index.Host, { key: 'a5d2d5b38e1f0f0ce1161ba1194560f5c9f84ae7' }, index.h("kv-tooltip", { key: '410df1ea814f846522a0bc680edf2856125bde91', text: this.tooltipText, options: this.tooltipConfig, delay: this.tooltipDelay, onClick: this.onTextCopy }, index.h("div", { key: '3074a8864deaf1daa4234ed267487fb3dfd7fcd9', part: "content", class: "copy-to-clipboard-container" }, index.h("slot", { key: '282f41272909ce3d2e6912255de4b898e2defb68' }), index.h("div", { key: 'febbbee3dd524d835efbe3389e3e37af812d1e56', class: {
'state-icon': true,
'state-icon--success': this.copyState === ECopyToClipboardState.Copied
} }, index.h("kv-icon", { key: 'a08a9c182cee0f7b40ac2ffc9e0eb6d4b358d91c', name: ICON_CONFIGS[this.copyState], part: "icon" }))))));
}
};
KvCopyToClipboard.style = copyToClipboardCss;
exports.kv_copy_to_clipboard = KvCopyToClipboard;