@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (62 loc) • 4.42 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var clipboard_helper = require('./clipboard.helper-DlaHqmZn.js');
require('./isNil-B-fGcnNC.js');
const ICON_CONFIGS = {
[wizard_types.ECopyToClipboardState.ReadyToCopy]: wizard_types.EIconName.CopyClipboard,
[wizard_types.ECopyToClipboardState.Copied]: wizard_types.EIconName.Success
};
const DEFAULT_TOOLTIP_CONFIG = {
placement: wizard_types.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 === wizard_types.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--container-width:100%;--container-padding:var(--spacing-md);--container-hover-background-color:var(--transparent);--container-gap:var(--spacing-md);--icon-start-opacity:0;--icon-color-default:var(--icon-container-neutral-subtle);--icon-color-success:var(--icon-surface-status-success-default);--icon-background-color-success:var(--background-surface-neutral-inverse);--icon-size:var(--size-md)}.copy-to-clipboard-container{width:var(--container-width);display:flex;justify-content:space-between;align-items:center;border-radius:var(--radius-md);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 = wizard_types.ECopyToClipboardState.ReadyToCopy;
this.onTextCopy = async (ev) => {
ev.stopPropagation();
if (this.copyState === wizard_types.ECopyToClipboardState.Copied)
return;
try {
await clipboard_helper.copyTextToClipboard(this.copiableText);
this.copyState = wizard_types.ECopyToClipboardState.Copied;
setTimeout(() => (this.copyState = wizard_types.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: '7f1bc9047fef424bbe5a5cc1ca2445b413009f21' }, index.h("kv-tooltip", { key: '34049014fcfcb7ee4e17b4f00057b18e66a268f8', text: this.tooltipText, options: this.tooltipConfig, delay: this.tooltipDelay, onClick: this.onTextCopy }, index.h("div", { key: 'bd02b999a816aae80d833cb4ae95f9bd17c74e92', part: "content", class: "copy-to-clipboard-container" }, index.h("slot", { key: '3726b84a1700251303b31496b7de2d0b7fbcb99e' }), index.h("div", { key: '6d3b3f5d2c1e80728b8de66ed5871b32fed6ef05', class: {
'state-icon': true,
'state-icon--success': this.copyState === wizard_types.ECopyToClipboardState.Copied
} }, index.h("kv-icon", { key: '74fdee8ab603a3bee2a4e087fd78b8549682be9a', name: ICON_CONFIGS[this.copyState], part: "icon" }))))));
}
};
KvCopyToClipboard.style = copyToClipboardCss;
exports.kv_copy_to_clipboard = KvCopyToClipboard;