import { r as registerInstance, h, a as getElement } from './index-25e5af33.js';

const scCcLogoCss = ":host{display:inline-block}.cc-logo{border-radius:var(--sc-cc-border-radius, 4px);line-height:0;overflow:hidden}";
const ScCcLogoStyle0 = scCcLogoCss;

const ScCcLogo = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.brand = undefined;
    }
    renderLogo() {
        if (['visa', 'mastercard', 'amex', 'discover', 'diners', 'jcb', 'unionpay'].includes(this.brand)) {
            return h("sc-icon", { name: this.brand, style: { '--height': '0.63em' } });
        }
        return h("sc-icon", { name: "creditcard", style: { '--height': '0.63em' } });
    }
    render() {
        return (h("div", { key: '70dfcc0901b36f91173a1a317dc3169c2489b2b7', class: "cc-logo", part: "base" }, this.renderLogo()));
    }
};
ScCcLogo.style = ScCcLogoStyle0;

const scTooltipCss = ".tooltip{position:relative}.tooltip--has-width .tooltip-text{white-space:normal;min-width:var(--sc-tooltip-width);max-width:var(--sc-tooltip-width)}.tooltip-text{position:fixed;background:var(--sc-color-gray-900);border-radius:var(--sc-border-radius-small);padding:var(--sc-spacing-small);font-family:var(--sc-input-font-family);font-size:var(--sc-input-font-size-small);white-space:nowrap;line-height:1.2;color:var(--sc-color-white);z-index:99999}.tooltip-text:after{content:\"\";position:absolute;height:0;width:0;border:7px solid transparent}.tooltip--top .tooltip-text:after{top:calc(100% - 1px);left:50%;transform:translateX(-50%);border-top-color:var(--sc-color-gray-900)}.tooltip--bottom .tooltip-text:after{bottom:calc(100% - 1px);left:50%;transform:translateX(-50%);border-bottom-color:var(--sc-color-gray-900)}.tooltip--left .tooltip-text:after{left:calc(100% - 1px);top:50%;transform:translateY(-50%);border-left-color:var(--sc-color-gray-900)}.tooltip--right .tooltip-text:after{right:calc(100% - 1px);top:50%;transform:translateY(-50%);border-right-color:var(--sc-color-gray-900)}.tooltip--primary .tooltip-text{background:var(--sc-color-primary-500)}.tooltip--primary.tooltip--top .tooltip-text:after{border-top-color:var(--sc-color-primary-500)}.tooltip--primary.tooltip--bottom .tooltip-text:after{border-bottom-color:var(--sc-color-primary-500)}.tooltip--primary.tooltip--left .tooltip-text:after{border-left-color:var(--sc-color-primary-500)}.tooltip--primary.tooltip--right .tooltip-text:after{border-right-color:var(--sc-color-primary-500)}.tooltip--success .tooltip-text{background:var(--sc-color-success-500)}.tooltip--success.tooltip--top .tooltip-text:after{border-top-color:var(--sc-color-success-500)}.tooltip--success.tooltip--bottom .tooltip-text:after{border-bottom-color:var(--sc-color-success-500)}.tooltip--success.tooltip--left .tooltip-text:after{border-left-color:var(--sc-color-success-500)}.tooltip--success.tooltip--right .tooltip-text:after{border-right-color:var(--sc-color-success-500)}.tooltip--info .tooltip-text{background:var(--sc-color-info-500)}.tooltip--info.tooltip--top .tooltip-text:after{border-top-color:var(--sc-color-info-500)}.tooltip--info.tooltip--bottom .tooltip-text:after{border-bottom-color:var(--sc-color-info-500)}.tooltip--info.tooltip--left .tooltip-text:after{border-left-color:var(--sc-color-info-500)}.tooltip--info.tooltip--right .tooltip-text:after{border-right-color:var(--sc-color-info-500)}.tooltip--warning .tooltip-text{background:var(--sc-color-warning-500)}.tooltip--warning.tooltip--top .tooltip-text:after{border-top-color:var(--sc-color-warning-500)}.tooltip--warning.tooltip--bottom .tooltip-text:after{border-bottom-color:var(--sc-color-warning-500)}.tooltip--warning.tooltip--left .tooltip-text:after{border-left-color:var(--sc-color-warning-500)}.tooltip--warning.tooltip--right .tooltip-text:after{border-right-color:var(--sc-color-warning-500)}.tooltip--danger .tooltip-text{background:var(--sc-color-danger-500)}.tooltip--danger.tooltip--top .tooltip-text:after{border-top-color:var(--sc-color-danger-500)}.tooltip--danger.tooltip--bottom .tooltip-text:after{border-bottom-color:var(--sc-color-danger-500)}.tooltip--danger.tooltip--left .tooltip-text:after{border-left-color:var(--sc-color-danger-500)}.tooltip--danger.tooltip--right .tooltip-text:after{border-right-color:var(--sc-color-danger-500)}.tooltip--dark .tooltip-text{background:#1e1e1e;color:#ffffff;padding:4px 8px;font-size:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.06)}.tooltip--dark .tooltip-text:after{display:none}";
const ScTooltipStyle0 = scTooltipCss;

const ScTooltip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.open = undefined;
        this.width = undefined;
        this.text = undefined;
        this.freeze = undefined;
        this.padding = 5;
        this.type = 'info';
        this.placement = 'top';
        this.top = -10000;
        this.left = -10000;
    }
    // Reposition after render, once the bubble ref exists — a post-watch
    // setTimeout raced the first render and could leave the bubble parked.
    componentDidRender() {
        this.handleWindowScroll();
    }
    handleWindowScroll() {
        if (!this.open)
            return;
        if (!this.tooltip)
            return;
        const tooltipRect = this.tooltip.getBoundingClientRect();
        const triggerRect = this.el.getBoundingClientRect();
        let top;
        let left;
        if (this.placement === 'bottom') {
            top = triggerRect.bottom + this.padding;
            left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
        }
        else if (this.placement === 'left') {
            top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
            left = triggerRect.left - tooltipRect.width - this.padding;
        }
        else if (this.placement === 'right') {
            top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
            left = triggerRect.right + this.padding;
        }
        else {
            // 'top' — original behavior, preserved as the default.
            top = triggerRect.top - (tooltipRect.height + this.padding);
            left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2 + this.padding;
        }
        // clientWidth, not innerWidth: the bubble must not sit under the scrollbar.
        // Overflowing top/bottom bubbles align to the trigger's edge — pinning
        // them to the viewport edge reads as clipped.
        const edgeMargin = 8;
        const maxLeft = document.documentElement.clientWidth - tooltipRect.width - edgeMargin;
        if (this.placement === 'top' || this.placement === 'bottom') {
            if (left > maxLeft) {
                left = triggerRect.right - tooltipRect.width;
            }
            else if (left < edgeMargin) {
                left = triggerRect.left;
            }
        }
        this.top = top;
        this.left = Math.min(Math.max(left, edgeMargin), Math.max(maxLeft, edgeMargin));
    }
    handleBlur() {
        if (this.freeze)
            return;
        this.open = false;
    }
    handleClick() {
        if (this.freeze)
            return;
        this.open = true;
    }
    handleFocus() {
        if (this.freeze)
            return;
        this.open = true;
    }
    handleMouseOver() {
        if (this.freeze)
            return;
        this.open = true;
    }
    handleMouseOut() {
        if (this.freeze)
            return;
        this.open = false;
    }
    render() {
        if (!this.text) {
            return h("slot", null);
        }
        return (h("span", { part: "base", class: {
                'tooltip': true,
                // Types
                'tooltip--primary': this.type === 'primary',
                'tooltip--success': this.type === 'success',
                'tooltip--info': this.type === 'info',
                'tooltip--warning': this.type === 'warning',
                'tooltip--danger': this.type === 'danger',
                'tooltip--dark': this.type === 'dark',
                'tooltip--top': this.placement === 'top',
                'tooltip--bottom': this.placement === 'bottom',
                'tooltip--left': this.placement === 'left',
                'tooltip--right': this.placement === 'right',
                'tooltip--has-width': !!this.width,
            }, onClick: () => this.handleClick(), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut() }, h("slot", null), !!this.open && (h("div", { part: "text", ref: el => (this.tooltip = el), class: "tooltip-text", style: {
                top: `${this.top}px`,
                left: `${this.left}px`,
                ...(this.width ? { '--sc-tooltip-width': this.width } : {}),
            } }, this.text))));
    }
    get el() { return getElement(this); }
};
ScTooltip.style = ScTooltipStyle0;

export { ScCcLogo as sc_cc_logo, ScTooltip as sc_tooltip };

//# sourceMappingURL=sc-cc-logo_2.entry.js.map