@limetech/lime-elements/dist/esm/limel-text-editor-link-menu.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h } from './index-DBTJNfo7.js';
import { t as translate } from './translations-DVRaJQvC.js';
import { a as ENTER, E as ESCAPE } from './keycodes-rI0IeKpx.js';

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) {
        registerInstance(this, hostRef);
        this.cancel = createEvent(this, "cancel");
        this.save = createEvent(this, "save");
        this.linkChange = 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 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 !== 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 !== 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 [
            h("limel-input-field", { key: 'f91dd3a9c03bb52cb91ea0f3251288f5a612cd3a', 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) }),
            h("limel-input-field", { key: '1034663268cae0a749397331b43ea44387431c78', 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 }),
            h("div", { key: '5c4b46deb47d9369a0a59e1e5908934093322755', class: "actions" }, h("limel-button", { key: '62c2dcc49a7907d938a27e2887432caa3e1a75ff', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: '5252752da58d02fd81abef41fc9788a07e277738', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
        ];
    }
};
TextEditorLinkMenu.style = editorLinkMenuCss();

export { TextEditorLinkMenu as limel_text_editor_link_menu };