'use strict';

var index = require('./index-BjHIBY-I.js');
var randomString = require('./random-string-BTzDB2ee.js');

const dockButtonCss = () => `@charset "UTF-8";.button{all:unset;isolation:isolate;position:relative;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-dock-item-text-color);background-color:var(--dock-background-color)}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover,.button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:var(--limel-theme-default-font-size);padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}.button.selected .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}`;

const DockButton = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.itemSelected = index.createEvent(this, "itemSelected");
        this.menuOpen = index.createEvent(this, "menuOpen");
        this.close = index.createEvent(this, "close");
        /**
         * When the dock is expanded or collapsed, dock items
         * show labels and tooltips as suitable for the layout.
         */
        this.expanded = false;
        /**
         * When dock is using mobile layout, dock items
         * show labels and tooltips as suitable for the layout.
         */
        this.useMobileLayout = false;
        /**
         * Indicated whether the popover that renders a component is open.
         */
        this.isOpen = false;
        this.renderNotification = () => {
            if (this.item.badge !== undefined) {
                return index.h("limel-badge", { label: this.item.badge });
            }
        };
        this.openPopover = (event) => {
            event.stopPropagation();
            this.isOpen = true;
            this.menuOpen.emit(this.item);
        };
        this.setCustomComponentElement = (element) => {
            this.customComponentElement = element;
        };
        this.onPopoverClose = () => {
            this.isOpen = false;
            this.close.emit();
        };
        this.handleClick = (event) => {
            event.stopPropagation();
            this.itemSelected.emit(this.item);
        };
        this.focusCustomComponentElement = (entries) => {
            var _a, _b, _c;
            const entry = entries.find((e) => e.target === this.customComponentElement);
            if (!entry) {
                return;
            }
            if (!entry.isIntersecting) {
                return;
            }
            if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
                (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
            }
        };
        this.getOpenDirection = () => {
            if (this.useMobileLayout) {
                return 'top';
            }
            return 'right';
        };
        this.tooltipId = randomString.createRandomString();
    }
    render() {
        var _a, _b;
        if ((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu) === null || _b === void 0 ? void 0 : _b.componentName) {
            return this.renderPopover();
        }
        return this.renderButton(this.handleClick);
    }
    openWatcher() {
        if (!this.isOpen) {
            return;
        }
        if (!this.intersectionObserver) {
            this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
            this.intersectionObserver.observe(this.customComponentElement);
        }
    }
    disconnectedCallback() {
        var _a;
        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this.intersectionObserver = undefined;
    }
    renderPopover() {
        var _a;
        const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
        return (index.h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right-start', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose }, this.renderButton(this.openPopover, 'trigger'), index.h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
    }
    renderButton(handleClick, slot) {
        var _a;
        return (index.h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
                button: true,
                selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
            }, onClick: handleClick, "aria-live": "polite" }, this.renderIcon(), this.renderLabel(), this.renderTooltip(), this.renderNotification()));
    }
    renderIcon() {
        if (!this.item.icon) {
            return;
        }
        return index.h("limel-icon", { name: this.item.icon, class: "icon" });
    }
    renderLabel() {
        if (this.expanded) {
            return index.h("span", { class: "text" }, this.item.label);
        }
    }
    renderTooltip() {
        if (!this.expanded && this.item.label) {
            return (index.h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel, openDirection: this.getOpenDirection() }));
        }
        if (this.expanded && this.item.helperLabel) {
            return (index.h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel, openDirection: this.getOpenDirection() }));
        }
    }
    static get watchers() { return {
        "isOpen": [{
                "openWatcher": 0
            }]
    }; }
};
DockButton.style = dockButtonCss();

exports.limel_dock_button = DockButton;
