'use strict';

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

const textEditorCss = () => `@charset "UTF-8";*{box-sizing:border-box}:host(limel-text-editor){--limel-notched-outline-z-index:2;--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(       0.19,       0.23,       0.26,       0.89   );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor) limel-notched-outline{height:100%}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0}:host(limel-text-editor[ui=minimal]:not(:focus-within)),:host(limel-text-editor[ui=no-toolbar]){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor[ui=minimal]:not(:focus-within)) limel-prosemirror-adapter,:host(limel-text-editor[ui=no-toolbar]) limel-prosemirror-adapter{min-height:2.5rem}:host(limel-text-editor:focus-within) .placeholder,:host(limel-text-editor:focus) .placeholder{opacity:0}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{cursor:not-allowed;opacity:0.4;pointer-events:none}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:"";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.placeholder{transition-property:top;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:var(--limel-theme-default-font-size);color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:5rem;height:100%;max-height:100%;overflow:hidden auto;-webkit-overflow-scrolling:touch}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}`;

const TextEditor = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        this.imagePasted = index.createEvent(this, "imagePasted");
        this.imageRemoved = index.createEvent(this, "imageRemoved");
        this.metadataChange = index.createEvent(this, "metadataChange");
        this.triggerStart = index.createEvent(this, "triggerStart");
        this.triggerStop = index.createEvent(this, "triggerStop");
        this.triggerChange = index.createEvent(this, "triggerChange");
        /**
         * The type of content that the editor should handle and emit, defaults to `markdown`
         *
         * Assumed to be set only once, so not reactive to changes
         */
        this.contentType = 'markdown';
        /**
         * Defines the language for translations.
         */
        this.language = 'en';
        /**
         * Set to `true` to disable the field.
         * Use `disabled` to indicate that the field can normally be interacted
         * with, but is currently disabled. This tells the user that if certain
         * requirements are met, the field may become enabled again.
         */
        this.disabled = false;
        /**
         * Set to `true` to make the component read-only.
         * Use `readonly` when the field is only there to present the data it holds,
         * and will not become possible for the current user to edit.
         * :::note
         * Consider that it might be better to use `limel-markdown`
         * instead of `limel-text-editor` when the goal is visualizing data.
         * :::
         */
        this.readonly = false;
        /**
         * Set to `true` to indicate that the current value of the editor is
         * invalid.
         */
        this.invalid = false;
        /**
         * A list of custom elements
         *
         * Any `CustomElement` that should be used inside the text editor needs
         * to be defined here.
         *
         * @private
         * @alpha
         */
        this.customElements = [];
        /**
         * A set of trigger characters
         *
         * Defining a character here will enable trigger events to be sent if the
         * character is detected in the editor.
         *
         * @private
         * @alpha
         */
        this.triggers = [];
        /**
         * Set to `true` to indicate that the field is required.
         *
         * :::important
         * An empty but required field is not automatically considered invalid.
         * You must make sure to check the validity of the field on your own,
         * and properly handle the `invalid` state.
         * :::
         */
        this.required = false;
        /**
         * Set to `true` to allow the user to vertically resize the editor.
         * Set to `false` to disable the resize functionality.
         */
        this.allowResize = true;
        /**
         * Specifies the visual appearance of the editor.
         *
         * - `standard`: The default editor appearance with a full toolbar and
         *    standard layout.
         * - `minimal`: A compact editor appearance, ideal for limited space
         *    scenarios such as mobile devices. In this mode, the toolbar is hidden
         *    until the editor is focused.
         * - `no-toolbar`: A basic textarea appearance without any text styling toolbar.
         *    This mode is suitable for scenarios where you want to provide a simple
         *    text input without any visible formatting options; but still provide
         *    support for markdown syntax and rich text, using hotkeys or when pasting.
         */
        this.ui = 'standard';
        this.renderHelperLine = () => {
            if (!this.helperText) {
                return;
            }
            return (index.h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.isInvalid() }));
        };
        this.isInvalid = () => {
            if (this.readonly) {
                // A readonly field can never be invalid.
                return false;
            }
            if (this.invalid) {
                return true;
            }
        };
        this.handleChange = (event) => {
            event.stopPropagation();
            this.change.emit(event.detail);
        };
        this.handleImagePasted = (event) => {
            event.stopPropagation();
            this.imagePasted.emit(event.detail);
        };
        this.handleMetadataChange = (event) => {
            event.stopPropagation();
            this.metadataChange.emit(event.detail);
        };
        this.handleImageRemoved = (event) => {
            event.stopPropagation();
            this.imageRemoved.emit(event.detail);
        };
        this.helperTextId = randomString.createRandomString();
        this.editorId = randomString.createRandomString();
    }
    render() {
        return (index.h(index.Host, { key: 'bde3c6cc9cb0ed28fc72a3749a178b40d8694633' }, index.h("limel-notched-outline", { key: '344abd4bc6c049085605d9ea74cb942f93b331a6', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
    }
    renderEditor() {
        if (this.readonly) {
            return (index.h("limel-markdown", { slot: "content", value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId }));
        }
        return (index.h("limel-prosemirror-adapter", { slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
    }
    renderPlaceholder() {
        if (!this.placeholder || this.value) {
            return;
        }
        return (index.h("span", { class: "placeholder", "aria-hidden": "true", slot: "content" }, this.placeholder));
    }
    static get delegatesFocus() { return true; }
};
TextEditor.style = textEditorCss();

exports.limel_text_editor = TextEditor;
