@limetech/lime-elements 38.8.1 → 38.9.0

package/dist/lime-elements/p-dab94ceb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,H as i}from"./p-288f0842.js";import{c as o}from"./p-96460db3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}*{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(\n      0.19,\n      0.23,\n      0.26,\n      0.89\n  );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: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}: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:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:5rem;height:100%;overflow:hidden auto}: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 a=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.imagePasted=t(this,"imagePasted",7);this.imageRemoved=t(this,"imageRemoved",7);this.triggerStart=t(this,"triggerStart",7);this.triggerStop=t(this,"triggerStop",7);this.triggerChange=t(this,"triggerChange",7);this.renderHelperLine=()=>{if(!this.helperText){return}return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.isInvalid()})};this.isInvalid=()=>{if(this.readonly){return false}if(this.invalid){return true}};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.handleImagePasted=e=>{e.stopPropagation();this.imagePasted.emit(e.detail)};this.handleImageRemoved=e=>{e.stopPropagation();this.imageRemoved.emit(e.detail)};this.contentType="markdown";this.language="en";this.disabled=false;this.readonly=false;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=false;this.value=undefined;this.customElements=[];this.triggers=[];this.required=false;this.allowResize=true;this.ui="standard";this.helperTextId=o();this.editorId=o()}render(){return r(i,null,r("limel-notched-outline",{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 r("limel-markdown",{slot:"content",value:this.value,"aria-controls":this.helperTextId,id:this.editorId})}return r("limel-prosemirror-adapter",{slot:"content","aria-placeholder":this.placeholder,contentType:this.contentType,onChange:this.handleChange,onImagePasted:this.handleImagePasted,onImageRemoved:this.handleImageRemoved,customElements:this.customElements,value:this.value,"aria-controls":this.helperTextId,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 r("span",{class:"placeholder","aria-hidden":"true",slot:"content"},this.placeholder)}static get delegatesFocus(){return true}};a.style=l;export{a as limel_text_editor};
+//# sourceMappingURL=p-dab94ceb.entry.js.map

package/dist/lime-elements/p-dab94ceb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","handleImagePasted","imagePasted","handleImageRemoved","imageRemoved","createRandomString","editorId","render","Host","labelId","label","required","disabled","hasValue","value","hasFloatingLabel","renderEditor","renderPlaceholder","slot","id","placeholder","contentType","onChange","onImagePasted","onImageRemoved","customElements","language","triggerCharacters","triggers","ui","class"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n* {\n    box-sizing: border-box;\n}\n\n$min-height: 5rem;\n\n:host(limel-text-editor) {\n    --limel-notched-outline-z-index: 2; // since `div.toolbar` has `z-index: 1;`\n    --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n    --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n    --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n        0.19,\n        0.23,\n        0.26,\n        0.89\n    );\n\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: $min-height;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n    padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n    --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n    --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n    --limel-prosemirror-adapter-toolbar-opacity: 0;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)),\n:host(limel-text-editor[ui='no-toolbar']) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    min-height: calc($min-height / 2);\n    limel-prosemirror-adapter {\n        min-height: calc($min-height / 2);\n    }\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:focus) {\n    .placeholder {\n        opacity: 0;\n    }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    limel-prosemirror-adapter {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    limel-markdown {\n        // displayed when `readonly` instead of the adapter\n        display: block;\n        padding: var(--limel-text-editor-padding);\n        overflow-y: auto;\n\n        &:before,\n        &:after {\n            z-index: 1;\n            pointer-events: none;\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n        }\n        &:after {\n            height: 1.75rem;\n            top: 0;\n            background: linear-gradient(\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                ),\n                transparent\n            );\n        }\n\n        &:before {\n            height: 2rem;\n            bottom: -0.25rem;\n            background: linear-gradient(\n                transparent,\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                )\n            );\n        }\n    }\n}\n\n.placeholder {\n    transition-property: top;\n    transition-duration: var(\n        --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n    );\n    transition-timing-function: var(\n        --limel-prosemirror-adapter-toolbar-transition-timing-function\n    );\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: 0.875rem;\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: $min-height;\n    height: 100%;\n    overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n    ImageInserter,\n    ImageInfo,\n} from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-with-inline-images-file-storage\n * @exampleComponent limel-example-text-editor-with-inline-images-base64\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-custom-element\n * @exampleComponent limel-example-text-editor-triggers\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * A list of custom elements\n     *\n     * Any `CustomElement` that should be used inside the text editor needs\n     * to be defined here.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public customElements: CustomElementDefinition[] = [];\n\n    /**\n     * A set of trigger characters\n     *\n     * Defining a character here will enable trigger events to be sent if the\n     * character is detected in the editor.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public triggers: TriggerCharacter[] = [];\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Specifies the visual appearance of the editor.\n     *\n     * - `standard`: The default editor appearance with a full toolbar and\n     *    standard layout.\n     * - `minimal`: A compact editor appearance, ideal for limited space\n     *    scenarios such as mobile devices. In this mode, the toolbar is hidden\n     *    until the editor is focused.\n     * - `no-toolbar`: A basic textarea appearance without any text styling toolbar.\n     *    This mode is suitable for scenarios where you want to provide a simple\n     *    text input without any visible formatting options; but still provide\n     *    support for markdown syntax and rich text, using hotkeys or when pasting.\n     */\n    @Prop({ reflect: true })\n    public ui?: EditorUiType = 'standard';\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    /**\n     * Dispatched when a image is pasted into the editor\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly imagePasted: EventEmitter<ImageInserter>;\n\n    /**\n     * Dispatched when a image is removed from the editor\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly imageRemoved: EventEmitter<ImageInfo>;\n\n    /**\n     * Dispatched if a trigger character is detected.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStart: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a trigger session is ended. That is if the selection\n     * goes outside the trigger input or if something is inserted using the\n     * supplied `TextEditor` insert function.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStop: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a input is changed during an active trigger.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerChange: EventEmitter<TriggerEventDetail>;\n\n    private readonly helperTextId: string;\n    private readonly editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <limel-notched-outline\n                    labelId={this.editorId}\n                    label={this.label}\n                    required={this.required}\n                    invalid={this.invalid}\n                    disabled={this.disabled}\n                    readonly={this.readonly}\n                    hasValue={!!this.value}\n                    hasFloatingLabel={true}\n                >\n                    {this.renderEditor()}\n                    {this.renderPlaceholder()}\n                </limel-notched-outline>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly) {\n            return (\n                <limel-markdown\n                    slot=\"content\"\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    id={this.editorId}\n                />\n            );\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                slot=\"content\"\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                onImagePasted={this.handleImagePasted}\n                onImageRemoved={this.handleImageRemoved}\n                customElements={this.customElements}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                aria-disabled={this.disabled}\n                aria-invalid={this.invalid}\n                aria-required={this.required}\n                language={this.language}\n                triggerCharacters={this.triggers}\n                disabled={this.disabled}\n                ui={this.ui}\n            />\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\" slot=\"content\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleImagePasted = (event: CustomEvent<ImageInserter>) => {\n        event.stopPropagation();\n        this.imagePasted.emit(event.detail);\n    };\n\n    private handleImageRemoved = (event: CustomEvent<ImageInfo>) => {\n        event.stopPropagation();\n        this.imageRemoved.emit(event.detail);\n    };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,4hK,MC0CTC,EAAU,MAsLnBC,YAAAC,G,8PAyEQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,EAG1Bb,KAAAc,kBAAqBL,IACzBA,EAAMC,kBACNV,KAAKe,YAAYH,KAAKH,EAAMI,OAAO,EAG/Bb,KAAAgB,mBAAsBP,IAC1BA,EAAMC,kBACNV,KAAKiB,aAAaL,KAAKH,EAAMI,OAAO,E,iBA9RE,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,yCAkBwB,G,cAYb,G,cAYV,M,iBAOE,K,QAgBH,WA2DvBb,KAAKI,aAAec,IACpBlB,KAAKmB,SAAWD,G,CAGbE,SACH,OACIjB,EAACkB,EAAI,KACDlB,EAAA,yBACImB,QAAStB,KAAKmB,SACdI,MAAOvB,KAAKuB,MACZC,SAAUxB,KAAKwB,SACfnB,QAASL,KAAKK,QACdoB,SAAUzB,KAAKyB,SACflB,SAAUP,KAAKO,SACfmB,WAAY1B,KAAK2B,MACjBC,iBAAkB,MAEjB5B,KAAK6B,eACL7B,KAAK8B,qBAET9B,KAAKC,mB,CAKV4B,eACJ,GAAI7B,KAAKO,SAAU,CACf,OACIJ,EAAA,kBACI4B,KAAK,UACLJ,MAAO3B,KAAK2B,MAAK,gBACF3B,KAAKI,aACpB4B,GAAIhC,KAAKmB,U,CAKrB,OACIhB,EAAA,6BACI4B,KAAK,UAAS,mBACI/B,KAAKiC,YACvBC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKQ,aACf4B,cAAepC,KAAKc,kBACpBuB,eAAgBrC,KAAKgB,mBACrBsB,eAAgBtC,KAAKsC,eACrBX,MAAO3B,KAAK2B,MAAK,gBACF3B,KAAKI,aACpB4B,GAAIhC,KAAKmB,SAAQ,gBACFnB,KAAKyB,SAAQ,eACdzB,KAAKK,QAAO,gBACXL,KAAKwB,SACpBe,SAAUvC,KAAKuC,SACfC,kBAAmBxC,KAAKyC,SACxBhB,SAAUzB,KAAKyB,SACfiB,GAAI1C,KAAK0C,I,CAKbZ,oBACJ,IAAK9B,KAAKiC,aAAejC,KAAK2B,MAAO,CACjC,M,CAGJ,OACIxB,EAAA,QAAMwC,MAAM,cAAa,cAAa,OAAOZ,KAAK,WAC7C/B,KAAKiC,Y"}

package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts

@@ -1,6 +1,7 @@
 import { Languages } from '../../date-picker/date.types';
 import { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';
 import { TriggerCharacter } from '../text-editor.types';
+import { EditorUiType } from '../types';
 /**
  * The ProseMirror adapter offers a rich text editing experience with markdown support.
  * [Read more...](https://prosemirror.net/)
@@ -46,6 +47,10 @@ export declare class ProsemirrorAdapter {
    * @alpha
    */
   triggerCharacters: TriggerCharacter[];
+  /**
+   * Specifies the visual appearance of the editor.
+   */
+  ui: EditorUiType;
   private host;
   private portalId;
   private view;
@@ -90,6 +95,7 @@ export declare class ProsemirrorAdapter {
   connectedCallback(): void;
   disconnectedCallback(): void;
   render(): any;
+  renderToolbar(): any;
   renderLinkMenu(): any;
   private setupContentConverter;
   private getActionBarItems;

package/dist/types/components/text-editor/text-editor.d.ts

@@ -120,6 +120,10 @@ export declare class TextEditor implements FormComponent<string> {
    * - `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.
    */
   ui?: EditorUiType;
   /**
@@ -132,14 +136,14 @@ export declare class TextEditor implements FormComponent<string> {
    * @private
    * @alpha
    */
-  private imagePasted;
+  private readonly imagePasted;
   /**
    * Dispatched when a image is removed from the editor
    *
    * @private
    * @alpha
    */
-  private imageRemoved;
+  private readonly imageRemoved;
   /**
    * Dispatched if a trigger character is detected.
    *
@@ -163,10 +167,10 @@ export declare class TextEditor implements FormComponent<string> {
    * @alpha
    */
   triggerChange: EventEmitter<TriggerEventDetail>;
-  private helperTextId;
-  private editorId;
+  private readonly helperTextId;
+  private readonly editorId;
   constructor();
-  render(): any[];
+  render(): any;
   private renderEditor;
   private renderPlaceholder;
   private renderHelperLine;

package/dist/types/components/text-editor/types.d.ts

@@ -9,5 +9,5 @@ export type TextEditorPlugin = {
 /**
  * @beta
  */
-export type EditorUiType = 'standard' | 'minimal';
+export type EditorUiType = 'standard' | 'minimal' | 'no-toolbar';
 //# sourceMappingURL=types.d.ts.map

package/dist/types/components.d.ts

@@ -40,12 +40,12 @@ import { Searcher } from "./components/picker/searcher.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { ImageInfo, ImageInserter, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
+import { EditorUiType } from "./components/text-editor/types";
 import { Option } from "./components/select/option.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, RowData, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
-import { EditorUiType } from "./components/text-editor/types";
 import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export { ActionBarItem } from "./components/action-bar/action-bar.types";
 export { ListItem, ListSeparator } from "./components/list/list-item.types";
@@ -82,12 +82,12 @@ export { Searcher } from "./components/picker/searcher.types";
 export { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 export { FlowItem } from "./components/progress-flow/progress-flow.types";
 export { ImageInfo, ImageInserter, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
+export { EditorUiType } from "./components/text-editor/types";
 export { Option } from "./components/select/option.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
 export { Tab } from "./components/tab-bar/tab.types";
 export { Column, ColumnAggregate, ColumnSorter, RowData, TableParams } from "./components/table/table.types";
 export { Layout } from "./components/table/layout";
-export { EditorUiType } from "./components/text-editor/types";
 export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export namespace Components {
     /**
@@ -2357,6 +2357,10 @@ export namespace Components {
           * @alpha
          */
         "triggerCharacters": TriggerCharacter[];
+        /**
+          * Specifies the visual appearance of the editor.
+         */
+        "ui": EditorUiType;
         /**
           * The value of the editor, expected to be markdown
          */
@@ -2859,7 +2863,7 @@ export namespace Components {
          */
         "triggers": TriggerCharacter[];
         /**
-          * 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.
+          * 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.
          */
         "ui"?: EditorUiType;
         /**
@@ -7174,6 +7178,10 @@ declare namespace LocalJSX {
           * @alpha
          */
         "triggerCharacters"?: TriggerCharacter[];
+        /**
+          * Specifies the visual appearance of the editor.
+         */
+        "ui"?: EditorUiType;
         /**
           * The value of the editor, expected to be markdown
          */
@@ -7765,7 +7773,7 @@ declare namespace LocalJSX {
          */
         "triggers"?: TriggerCharacter[];
         /**
-          * 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.
+          * 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.
          */
         "ui"?: EditorUiType;
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.8.1",
+  "version": "38.9.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",