/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from './index-Bf4Ol6Qt.js';
import { c as cn } from './cn-BK16Cn81.js';

const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWV5ZSI+CiAgICA8cGF0aCBkPSJNMi4wNjIgMTIuMzQ4YTEgMSAwIDAgMSAwLS42OTYgMTAuNzUgMTAuNzUgMCAwIDEgMTkuODc2IDAgMSAxIDAgMCAxIDAgLjY5NiAxMC43NSAxMC43NSAwIDAgMS0xOS44NzYgMCIgLz4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIC8+Cjwvc3ZnPg==';

const ImageViewer = ({ expandedImage, style = {}, imageStyle = {}, closeImageViewer }) => {
    return (h("div", null,
        h("div", { onClick: closeImageViewer, class: cn('image-viewer-overlay', { active: expandedImage }), style: Object.assign({ backdropFilter: expandedImage ? 'blur(3px)' : 'blur(0px)' }, style) },
            h("button", { class: "image-viewer-close-btn" },
                h("div", { class: "image-viewer-close-line first" }),
                h("div", { class: "image-viewer-close-line second" }))),
        h("img", { style: imageStyle, alt: "", class: "image-viewer-expanded-image" })));
};

let closeImageListener;
function openImageViewer(target, imageSrc) {
    if (this.expandedImage === imageSrc)
        return;
    this.originalImage = target;
    const expandedImageRef = this.el.shadowRoot.querySelector('.image-viewer-expanded-image');
    expandedImageRef.src = target.src;
    document.removeEventListener('keydown', closeImageListener);
    closeImageListener = () => closeImageViewer.bind(this)();
    document.addEventListener('keydown', closeImageListener);
    const rect = target.getBoundingClientRect();
    document.body.style.overflow = 'hidden';
    Object.assign(expandedImageRef.style, {
        top: `${rect.top}px`,
        pointerEvents: 'auto',
        left: `${rect.left}px`,
        transitionDuration: '0s',
        width: `${rect.width}px`,
        height: `${rect.height}px`,
    });
    setTimeout(() => {
        const naturalWidth = target.naturalWidth;
        const naturalHeight = target.naturalHeight;
        const maxWidth = window.innerWidth - 160;
        const maxHeight = window.innerHeight - 32;
        const aspectRatio = naturalWidth / naturalHeight;
        let width, height;
        if (maxWidth / aspectRatio <= maxHeight) {
            width = maxWidth;
            height = maxWidth / aspectRatio;
        }
        else {
            height = maxHeight;
            width = maxHeight * aspectRatio;
        }
        expandedImageRef.style.transitionDuration = '0.3s';
        Object.assign(expandedImageRef.style, {
            opacity: '1',
            width: `${width}px`,
            height: `${height}px`,
            top: `${(window.innerHeight - height) / 2}px`,
            left: `${(window.innerWidth - width) / 2}px`,
        });
        this.expandedImage = imageSrc;
    }, 200);
}
function closeImageViewer(event) {
    event === null || event === void 0 ? void 0 : event.preventDefault();
    if (event && event.key !== 'Escape')
        return;
    document.removeEventListener('keydown', closeImageListener);
    const expandedImageRef = this.el.shadowRoot.querySelector('.image-viewer-expanded-image');
    const rect = this.originalImage.getBoundingClientRect();
    Object.assign(expandedImageRef.style, {
        top: `${rect.top}px`,
        pointerEvents: 'none',
        left: `${rect.left}px`,
        width: `${rect.width}px`,
        height: `${rect.height}px`,
        transitionDuration: '0.3s',
    });
    setTimeout(() => {
        expandedImageRef.src = '';
        expandedImageRef.style.opacity = '0';
        expandedImageRef.style.transitionDuration = '0s';
    }, 300);
    document.body.style.overflow = '';
    this.expandedImage = null;
}

const ActivationIcon = props => (h("svg", { class: props.class, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    h("g", { "stroke-width": "0" }),
    h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }),
    h("g", null,
        h("circle", { cx: "12", cy: "12", r: "8", "fill-opacity": "0.24" }),
        h("path", { d: "M8.5 11L11.3939 13.8939C11.4525 13.9525 11.5475 13.9525 11.6061 13.8939L19.5 6", "stroke-width": "1.2" }))));

const PrintIcon = props => (h("svg", { class: props.class, viewBox: "-5 -5 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 7H7V6h10v1zm0 12H7v-6h10v6zm2-12V3H5v4H1v8.996C1 17.103 1.897 18 3.004 18H5v3h14v-3h1.996A2.004 2.004 0 0 0 23 15.996V7h-4z", fill: "rgb(252, 248, 227)" })));

export { ActivationIcon as A, ImageViewer as I, PrintIcon as P, closeImageViewer as c, eyeSvg as e, openImageViewer as o };
