@kelvininc/ui-components/components/p-CdpiKgMO.js

Kelvin UI Components

import { f as ETooltipPosition, t as EIconName, p as ECopyToClipboardState, H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';
import { o as offset, d as defineCustomElement$3 } from './p-CgqRIP0M.js';
import { a as copyTextToClipboard } from './p-DWmIpAOE.js';
import { d as defineCustomElement$4 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';

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}}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 = /*@__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: '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 style() { return copyToClipboardCss; }
}, [257, "kv-copy-to-clipboard", {
        "copiableText": [513, "copiable-text"],
        "tooltipSuffix": [513, "tooltip-suffix"],
        "tooltipDelay": [514, "tooltip-delay"],
        "tooltipConfig": [16, "tooltip-config"],
        "copyState": [32]
    }]);
function defineCustomElement() {
    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);
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "kv-portal":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "kv-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "kv-tooltip-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { KvCopyToClipboard as K, defineCustomElement as d };