import { r as registerInstance, h, c as createEvent } from './index-BIwHMk6j.js';
import { g as getPreviewType } from './extension-mapping-Bcm94u_z.js';
import { g as getFileExtension } from './file-extension-DtnPTzDv.js';

const navigationButtonCss = () => `@charset "UTF-8";.navigation-button{all:unset;isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;height:1.875rem;width:1.875rem;border-radius:50%;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--navigation-button-background-color, var(--lime-elevated-surface-background-color))}.navigation-button:hover,.navigation-button:focus,.navigation-button:focus-visible{will-change:color, background-color, box-shadow, transform}.navigation-button:hover,.navigation-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.navigation-button:hover{box-shadow:var(--button-shadow-hovered)}.navigation-button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.navigation-button:hover,.navigation-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.navigation-button:focus{outline:none}.navigation-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.navigation-button limel-icon{transition:color 0.2s ease, transform 0.2s cubic-bezier(0.84, 0.15, 0.52, 1.42);color:var(--header-menu-icon-color);width:1.25rem}.newTab limel-icon{transition:transform 0.2s ease;transform:scale(0.8);z-index:3}.newTab:before{z-index:2}.newTab::after{z-index:1}.newTab:before,.newTab:after{content:"";transition:transform 0.2s ease, border-color 0.2s ease;position:absolute;width:0.875rem;height:0.875rem;outline:1.5px solid rgb(var(--contrast-900));border-radius:1px;background-color:var(--navigation-button-background-color, rgb(var(--contrast-100)))}.newTab:hover limel-icon{color:var(--mdc-theme-primary);transform:translate3d(-0.1rem, 0.1rem, 0) scale(1)}.newTab:hover:before{transform:translate3d(0.125rem, -0.125rem, 0);border-color:rgb(var(--contrast-1000));box-shadow:var(--shadow-depth-8)}.newTab:hover:after{transform:translate3d(-0.15rem, 0.15rem, 0) scale(0.9);border-color:rgb(var(--contrast-700))}.expand:after{transition:transform 0.2s ease;content:"";position:absolute;z-index:1;background-color:var(--navigation-button-background-color, rgb(var(--contrast-100)));width:0.75rem;height:0.75rem}.expand:hover limel-icon{color:var(--mdc-theme-primary)}.expand:hover:after{transform:scale(0.5)}.expand:hover limel-icon{transform:scale(1.18)}.minimize:before,.minimize:after,.maximize:before,.maximize:after{content:"";transition:transform 0.3s ease-out 0.15s, background-color 0.1s ease}.minimize limel-icon,.maximize limel-icon{transition:transform 0.2s ease 0.1s}.minimize:before,.maximize:after,.maximize:hover:before{transform:scaleY(1) scaleX(1);z-index:-1;box-sizing:border-box;position:absolute;width:70%;height:60%;border-radius:0.25rem;transform-origin:bottom}.minimize:hover:before,.maximize:before{transition:transform 0.3s ease-out 0.15s, background-color 0.1s ease;transform:scaleY(0.3) scaleX(0.7);background-color:rgb(var(--contrast-500))}.minimize:hover limel-icon,.maximize limel-icon{transform:scaleX(0.8) translate3d(0, 0.4rem, 0)}.maximize limel-icon{color:rgb(var(--contrast-900))}.maximize:hover limel-icon{color:currentColor;transform:scaleX(1.1) translate3d(0, -0.1rem, 0)}.maximize:after{z-index:-2;border:1px dashed rgb(var(--contrast-800))}.close limel-icon{transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{transition-delay:0.1s;content:"";position:absolute;inset:0;border-radius:50%;opacity:0}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.float:after{transition:width 0.2s ease-out, opacity 0.2s ease;content:"";position:absolute;inset:0 0.5rem 0 auto;border-radius:1px;opacity:0.8;transform:translate3d(0, 0, 0);background-color:rgb(var(--contrast-800));width:0.125rem;height:0.6rem;margin:auto}.float:hover:after{width:0.4rem;opacity:1;transform:translate3d(0, 0, 0)}`;

const ICONS = {
    expand: 'expand',
    minimize: 'minus_math',
    maximize: 'minus_math',
    newTab: 'up_right_arrow',
    back: 'left_arrow',
    close: 'multiply',
    shrink: 'compress',
    float: 'rectangle',
};
const NavigationButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.renderAsLink = () => {
            return (h("a", { class: this.getContainerClassList(), id: "tooltipId", "aria-label": this.tooltipLabel && this.tooltipHelperLabel, href: this.href, target: this.type === 'newTab' ? '_blank' : undefined }, this.renderType(), this.renderTooltip()));
        };
        this.renderAsButton = () => {
            return (h("button", { class: this.getContainerClassList(), id: "tooltipId", "aria-label": this.tooltipLabel && this.tooltipHelperLabel }, this.renderType(), this.renderTooltip()));
        };
        this.getContainerClassList = () => {
            return {
                'navigation-button': true,
                [this.type]: true,
            };
        };
    }
    render() {
        if (this.href) {
            return this.renderAsLink();
        }
        return this.renderAsButton();
    }
    renderType() {
        return this.renderIcon(ICONS[this.type]);
    }
    renderTooltip() {
        if (!this.tooltipLabel) {
            return;
        }
        return (h("limel-tooltip", { label: this.tooltipLabel, helperLabel: this.tooltipHelperLabel, elementId: "tooltipId" }));
    }
    renderIcon(name) {
        return h("limel-icon", { name: name });
    }
    static get delegatesFocus() { return true; }
};
NavigationButton.style = navigationButtonCss();

const summaryPopoverCss = () => `limel-popover{--popover-border-radius:0.95rem;--popover-body-background-color:transparent;--popover-box-shadow:var(--shadow-depth-8)}div[slot=trigger]{position:relative;display:flex;align-items:center;justify-content:center}div[slot=trigger] *{min-width:0;min-height:0}.opening-countdown-indicator{position:absolute;inset:auto 0 -0.25rem 0;margin:0 auto;height:0.125rem;border-radius:1rem;transition:width ease-out, opacity ease;transition-duration:120ms;opacity:0;width:0%;background-color:var(--mdc-theme-primary)}div[slot=trigger]:not([aria-expanded=true]):hover .opening-countdown-indicator{transition-duration:var(--limebb-summary-popover-timeout);opacity:1;width:100%}`;

const SummaryPopover = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.actionSelected = createEvent(this, "actionSelected");
        /**
         * The delay in milliseconds, before the popover opens.
         */
        this.triggerDelay = 600;
        /**
         * Decides the popover's location in relation to its trigger
         */
        this.openDirection = 'top';
        /**
         * The maximum width of the popover.
         */
        this.popoverMaxWidth = '20rem';
        /**
         * The maximum height of the popover.
         */
        this.popoverMaxHeight = 'min(35rem, calc(100vh - 2rem))';
        /**
         * Actions to display in the card,
         * to provide the user with options to interact with the content.
         */
        this.actions = [];
        this.isPopoverOpen = false;
        this.openPopoverWithDelay = (event) => {
            event.stopPropagation();
            clearTimeout(this.hoverTimeout);
            this.hoverTimeout = window.setTimeout(() => {
                if (SummaryPopover.currentOpenPopover &&
                    SummaryPopover.currentOpenPopover !== this) {
                    SummaryPopover.currentOpenPopover.isPopoverOpen = false;
                }
                SummaryPopover.currentOpenPopover = this;
                this.isPopoverOpen = true;
            }, this.triggerDelay);
        };
        this.resetTimeout = () => {
            if (this.isPopoverOpen) {
                return;
            }
            clearTimeout(this.hoverTimeout);
        };
        this.onPopoverClose = (event) => {
            event.stopPropagation();
            this.isPopoverOpen = false;
            if (SummaryPopover.currentOpenPopover === this) {
                SummaryPopover.currentOpenPopover = null;
            }
        };
        this.handleCloseClick = (event) => {
            event.stopPropagation();
            this.isPopoverOpen = false;
        };
        this.handleSelected = (event) => {
            this.actionSelected.emit(event.detail);
        };
    }
    render() {
        const closeButtonStyle = {
            '--navigation-button-background-color': 'rgb(var(--contrast-100), 0.8)',
            position: 'absolute',
            top: '0.125rem',
            right: '0.125rem',
        };
        return (h("limel-popover", { key: '901e726d37719331f2b30df6e35f2375951c161f', style: {
                '--limebb-summary-popover-timeout': `${this.triggerDelay}ms`,
            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: 'a9a73b0a0f16cf12aaa6fa3434071c56a26a1038', slot: "trigger", onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocusin: this.openPopoverWithDelay }, h("slot", { key: '594bcc9e419e33ef97fd6ca863cf44a67617fa48', name: "trigger" }), h("div", { key: 'a6f548eeb737f4392e2c938682a1c9a509523658', class: "opening-countdown-indicator" })), this.renderCard(closeButtonStyle)));
    }
    renderCard(closeButtonStyle) {
        return (h("limel-card", { style: {
                'max-width': this.popoverMaxWidth,
                'max-height': this.popoverMaxHeight,
                'min-width': '7rem',
                'min-height': '3rem',
            }, orientation: "landscape", heading: this.heading, subheading: this.subheading, icon: this.icon, value: this.value, image: this.image, actions: this.actions, onActionSelected: this.handleSelected }, this.renderFileViewer(), h("limebb-navigation-button", { slot: "component", type: "close", style: closeButtonStyle, tooltipLabel: "Close", tooltipHelperLabel: "Esc", onClick: this.handleCloseClick })));
    }
    renderFileViewer() {
        var _a;
        if (!this.file) {
            return;
        }
        const extension = getFileExtension((_a = this.file.filename) !== null && _a !== void 0 ? _a : '');
        const previewType = getPreviewType(extension);
        const isUnsupported = previewType === 'sharepoint' || previewType === 'unsupported';
        const isPdf = extension === 'pdf';
        const style = {
            flex: '1',
            overflow: 'hidden',
            borderRadius: '0.5rem',
            minHeight: isPdf ? '20rem' : undefined,
        };
        return (h("limel-file-viewer", { slot: "component", style: style, url: this.file.href, filename: isUnsupported ? undefined : this.file.filename, allowDownload: true }));
    }
};
SummaryPopover.currentOpenPopover = null;
SummaryPopover.style = summaryPopoverCss();

export { NavigationButton as limebb_navigation_button, SummaryPopover as limebb_summary_popover };
