'use strict';

var index = require('./index-BjHIBY-I.js');
var translations = require('./translations-B0hzD08N.js');
var isItem = require('./is-item-DMELyaao.js');
var keycodes = require('./keycodes-CpIh7o5A.js');

const actionBarCss = () => `@charset "UTF-8";:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(       --action-bar-item-text-color,       rgb(var(--contrast-1100))   );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)));transition:max-width 0.3s ease}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-shrunk) .items{opacity:0}:host(limel-action-bar:not(.is-shrunk)) .items{opacity:1}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}:host(limel-action-bar.is-shrunk){max-width:5rem;transition:max-width 0.3s ease-in-out}:host(limel-action-bar.is-shrunk) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(180deg)}:host(limel-action-bar:not(.is-shrunk)){max-width:100%;transition:max-width 0.3s ease-in-out}:host(limel-action-bar:not(.is-shrunk)) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(0deg)}:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink{margin-left:auto}.expand-shrink{all:unset;box-sizing:border-box;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:transparent}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover,.expand-shrink:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}.expand-shrink: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)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink{display:flex;justify-content:center;align-items:center}.expand-shrink limel-icon{width:1.5rem;height:1.5rem;padding:0.125rem;color:var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)))}`;

const ActionBar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.itemSelected = index.createEvent(this, "itemSelected");
        /**
         * Items that are placed in the action bar.
         * These represent primary actions.
         */
        this.actions = [];
        /**
         * Defines the language for translations.
         */
        this.language = document.documentElement.lang;
        /**
         * When set to `true`, the action bar will be collapsible.
         */
        this.collapsible = false;
        this.overflowCutoff = this.actions.length;
        /**
         * Indicates whether the action bar is currently in a collapsed state.
         */
        this.actionBarIsShrunk = false;
        this.hasRendered = false;
        this.isFirstIntersectionCheck = true;
        this.actionBarItems = [];
        this.renderActionBarItem = (item, index$1) => {
            return (index.h("limel-action-bar-item", { item: item, onSelect: this.handleSelect, isVisible: this.isVisible(index$1), role: "gridcell" }));
        };
        this.renderOverflowMenu = (items) => {
            if (!(this.actions.length - this.overflowCutoff)) {
                return;
            }
            const shrunkOverFlowIcon = {
                name: 'more',
                color: 'rgb(var(--contrast-1000))',
                title: this.getTranslation('action-bar.actions'),
            };
            return (index.h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect, role: "gridcell", overFlowIcon: this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined }));
        };
        this.handleCollapseExpandClick = () => {
            this.actionBarIsShrunk = !this.actionBarIsShrunk;
        };
        this.handleSelect = (event) => {
            event.stopPropagation();
            if (isItem.isItem(event.detail)) {
                this.itemSelected.emit(event.detail);
            }
        };
        this.getTranslation = (key) => {
            return translations.translate.get(key, this.language);
        };
        this.handleIntersection = (entries) => {
            const intersectingItems = entries.filter((entry) => entry.isIntersecting);
            const notIntersectingItems = entries.filter((entry) => !entry.isIntersecting);
            if (this.isFirstIntersectionCheck) {
                this.overflowCutoff = intersectingItems.length;
            }
            else {
                this.overflowCutoff =
                    this.overflowCutoff +
                        intersectingItems.length -
                        notIntersectingItems.length;
            }
            this.isFirstIntersectionCheck = false;
        };
    }
    connectedCallback() {
        if (this.hasRendered) {
            this.createIntersectionObserver();
        }
    }
    componentDidRender() {
        var _a;
        if (this.haveItemsChanged()) {
            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
            this.createIntersectionObserver();
        }
    }
    disconnectedCallback() {
        var _a;
        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this.intersectionObserver = undefined;
        this.actionBarItems = [];
    }
    render() {
        this.hasRendered = true;
        let overflowActions = [];
        if (this.actions.length > 0) {
            overflowActions = this.actions.slice(this.overflowCutoff);
        }
        return (index.h(index.Host, { key: 'f81d3acb912e7191889f7b8e4462c6e1a1db692b', "aria-label": this.accessibleLabel, class: {
                'is-full-width': this.layout === 'fullWidth',
                'is-floating': this.layout === 'floating',
                'is-shrunk': this.actionBarIsShrunk && this.collapsible,
                'can-be-shrunk': !!this.collapsible,
            }, role: "grid" }, index.h("div", { key: 'd6d96d43a7dd278f1f65033b070213cd1c6b963e', class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions), this.renderCollapseExpandButton()));
    }
    renderCollapseExpandButton() {
        if (!this.collapsible || this.actions.length <= 1) {
            return;
        }
        return (index.h("button", { class: {
                'expand-shrink': true,
            }, "aria-label": this.tooltipLabel, type: "button", onClick: this.handleCollapseExpandClick }, index.h("limel-icon", { name: "double_left", id: "tooltip-expand-shrink-button" }), index.h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-expand-shrink-button" })));
    }
    isVisible(index) {
        return index < this.overflowCutoff;
    }
    get tooltipLabel() {
        let key = 'action-bar.collapse';
        if (this.actionBarIsShrunk) {
            key = 'action-bar.expand';
        }
        return this.getTranslation(key);
    }
    createIntersectionObserver() {
        const options = {
            root: this.host.shadowRoot.querySelector('.items'),
            rootMargin: '0px',
            threshold: 1,
        };
        this.overflowCutoff = this.actions.length;
        this.isFirstIntersectionCheck = true;
        this.actionBarItems = [];
        this.intersectionObserver = new IntersectionObserver(this.handleIntersection, options);
        for (const actionBarItem of this.host.shadowRoot.querySelectorAll('limel-action-bar-item')) {
            this.observe(actionBarItem);
        }
    }
    observe(actionBarItem) {
        this.intersectionObserver.observe(actionBarItem);
        this.actionBarItems.push(actionBarItem);
    }
    haveItemsChanged() {
        const someItemRemoved = this.actionBarItems.some((actionBarItem) => !this.host.shadowRoot.contains(actionBarItem));
        const someItemAdded = [
            ...this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),
        ].some((actionBarItem) => !this.actionBarItems.includes(actionBarItem));
        return someItemRemoved || someItemAdded;
    }
    get host() { return index.getElement(this); }
};
ActionBar.style = actionBarCss();

const editorLinkMenuCss = () => `:host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}`;

const TextEditorLinkMenu = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.cancel = index.createEvent(this, "cancel");
        this.save = index.createEvent(this, "save");
        this.linkChange = index.createEvent(this, "linkChange");
        /**
         * Defines the language for translations.
         */
        this.language = 'en';
        /**
         * Open state of the link-menu dialog
         */
        this.isOpen = false;
        this.getTranslation = (key) => {
            return translations.translate.get(key, this.language);
        };
        this.isValid = (href) => {
            try {
                new URL(href);
            }
            catch (_a) {
                return false;
            }
            return true;
        };
        this.handleKeyDown = (event) => {
            var _a;
            if (event.key !== keycodes.ENTER) {
                return;
            }
            if (this.saveButton) {
                this.saveButton.focus();
            }
            event.preventDefault();
            if (this.isValid((_a = this.link) === null || _a === void 0 ? void 0 : _a.href)) {
                this.handleSave(event);
            }
        };
        this.handleCancel = (event) => {
            if (event instanceof KeyboardEvent && event.key !== keycodes.ESCAPE) {
                return;
            }
            event.stopPropagation();
            event.preventDefault();
            this.cancel.emit();
        };
        this.handleSave = (event) => {
            event.stopPropagation();
            this.save.emit();
        };
        this.handleLinkInputAction = (event) => {
            window.open(this.link.href, '_blank');
            event.stopPropagation();
        };
        this.handleLinkTitleChange = (event) => {
            var _a;
            this.emitLinkChange(event.detail, (_a = this.link) === null || _a === void 0 ? void 0 : _a.href);
        };
        this.handleLinkValueChange = (event) => {
            var _a;
            const href = event.detail;
            this.emitLinkChange((_a = this.link) === null || _a === void 0 ? void 0 : _a.text, href);
        };
        this.emitLinkChange = (text, href) => {
            const newLink = {
                text: text,
                href: href,
            };
            this.linkChange.emit(newLink);
        };
    }
    connectedCallback() {
        this.setupGlobalHandlers();
    }
    disconnectedCallback() {
        this.teardownGlobalHandlers();
    }
    setupGlobalHandlers() {
        if (this.isOpen) {
            document.addEventListener('keyup', this.handleCancel);
        }
    }
    teardownGlobalHandlers() {
        document.removeEventListener('keyup', this.handleCancel);
    }
    componentDidLoad() {
        this.focusOnTextInput();
    }
    focusOnTextInput() {
        if (this.textInput) {
            const inputField = this.textInput.shadowRoot.querySelector('input');
            if (inputField) {
                requestAnimationFrame(() => {
                    inputField.focus();
                });
            }
        }
    }
    render() {
        var _a, _b;
        const isValid = this.isValid(this.link.href);
        return [
            index.h("limel-input-field", { key: '3553915b0afcb641ba9dbf4031c376ca9774af40', label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
            index.h("limel-input-field", { key: '06ac95f42941cc0680b3339886ae125388b47da5', label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
            index.h("div", { key: '176c41973294fd76512a3e4d927e03841bf83b8d', class: "actions" }, index.h("limel-button", { key: '58e7e4298ec04325d4dc1769bb6c39fda33f9092', label: this.getTranslation('cancel'), onClick: this.handleCancel }), index.h("limel-button", { key: 'b57aa7e6d6573f2a2722f9d3dc78f48febef63e6', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
        ];
    }
};
TextEditorLinkMenu.style = editorLinkMenuCss();

exports.limel_action_bar = ActionBar;
exports.limel_text_editor_link_menu = TextEditorLinkMenu;
