@limetech/lime-elements 37.20.0 → 37.21.0

package/dist/lime-elements/p-210c09a6.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t}from"./p-443111b3.js";const s="";const n=class{constructor(t){e(this,t);this.change=i(this,"change",7);this.handleChange=()=>e=>{e.stopPropagation();this.change.emit(e.detail)};this.disabled=undefined;this.readonly=undefined;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=undefined;this.value=undefined}render(){return t("limel-prosemirror-adapter",{onChange:this.handleChange,value:this.value})}};n.style=s;export{n as limel_text_editor};
+//# sourceMappingURL=p-210c09a6.entry.js.map

package/dist/lime-elements/p-210c09a6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textEditorCss","TextEditor","this","handleChange","event","stopPropagation","change","emit","detail","render","h","onChange","value"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":[null,"import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that allows the user to input and format text\n * The `limel-text-editor` can be used as a form field\n *\n * @exampleComponent limel-example-text-editor-basic\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: true,\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<{ html: string }> {\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;\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;\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;\n\n    /**\n     * Description of the text inside the editor\n     */\n    @Prop({ reflect: true })\n    public value: { html: string };\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<{ html: string }>;\n\n    public render() {\n        return (\n            <limel-prosemirror-adapter\n                onChange={this.handleChange}\n                value={this.value}\n            />\n        );\n    }\n\n    private handleChange = () => (event: CustomEvent<{ html: string }>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,G,MCeTC,EAAU,M,wDAqEXC,KAAAC,aAAe,IAAOC,IAC1BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMI,OAAO,E,sKAX3BC,SACH,OACIC,EAAA,6BACIC,SAAUT,KAAKC,aACfS,MAAOV,KAAKU,O"}

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

@@ -0,0 +1,32 @@
+/**
+ * The ProseMirror adapter offers a rich text editing experience with markdown support,
+ * in the sense that you can easily type markdown syntax and see the rendered
+ * result as rich text in real-time. For instance, you can type `# Hello, world!`
+ * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+ *
+ * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+ * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+ *
+ * @exampleComponent limel-example-prosemirror-adapter-basic
+ * @beta
+ * @private
+ */
+export declare class ProsemirrorAdapter {
+  /**
+   * The value of the editor
+   */
+  value: {
+    html: string;
+  };
+  private host;
+  private view;
+  /**
+   * Dispatched when a change is made to the editor
+   */
+  private change;
+  componentWillLoad(): void;
+  render(): any;
+  componentDidLoad(): void;
+  private getHTML;
+}
+//# sourceMappingURL=prosemirror-adapter.d.ts.map

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

@@ -1,25 +1,64 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FormComponent } from '../form/form.types';
 /**
- * This editor offers a rich text editing experience with markdown support,
- * in the sense that you can easily type markdown syntax and see the rendered
- * result as rich text in real-time. For instance, you can type `# Hello, world!`
- * and see it directly turning to a heading 1 (an `<h1>` HTML element).
- *
- * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
- * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+ * A rich text editor that allows the user to input and format text
+ * The `limel-text-editor` can be used as a form field
  *
  * @exampleComponent limel-example-text-editor-basic
  * @beta
  * @private
  */
-export declare class TextEditor {
-  private host;
-  private view;
+export declare class TextEditor implements FormComponent<{
+  html: string;
+}> {
+  /**
+   * 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.
+   */
+  disabled?: boolean;
+  /**
+   * 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.
+   * :::
+   */
+  readonly?: boolean;
+  /**
+   * Optional helper text to display below the input field when it has focus
+   */
+  helperText?: string;
+  /**
+   * The placeholder text shown inside the input field,
+   * when the field is empty.
+   */
+  placeholder?: string;
+  /**
+   * The label of the editor
+   */
+  label?: string;
+  /**
+   * Set to `true` to indicate that the current value of the editor is
+   * invalid.
+   */
+  invalid?: boolean;
+  /**
+   * Description of the text inside the editor
+   */
+  value: {
+    html: string;
+  };
   /**
    * Dispatched when a change is made to the editor
    */
-  private change;
-  componentWillLoad(): void;
+  change: EventEmitter<{
+    html: string;
+  }>;
   render(): any;
-  componentDidLoad(): void;
+  private handleChange;
 }
 //# sourceMappingURL=text-editor.d.ts.map

package/dist/types/components.d.ts

@@ -2053,6 +2053,23 @@ export namespace Components {
          */
         "readonly": boolean;
     }
+    /**
+     * The ProseMirror adapter offers a rich text editing experience with markdown support,
+     * in the sense that you can easily type markdown syntax and see the rendered
+     * result as rich text in real-time. For instance, you can type `# Hello, world!`
+     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * @exampleComponent limel-example-prosemirror-adapter-basic
+     * @beta 
+     * @private 
+     */
+    interface LimelProsemirrorAdapter {
+        /**
+          * The value of the editor
+         */
+        "value": { html: string };
+    }
     /**
      * @exampleComponent limel-example-select
      * @exampleComponent limel-example-select-with-icons
@@ -2458,17 +2475,41 @@ export namespace Components {
         "totalRows": number;
     }
     /**
-     * This editor offers a rich text editing experience with markdown support,
-     * in the sense that you can easily type markdown syntax and see the rendered
-     * result as rich text in real-time. For instance, you can type `# Hello, world!`
-     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * A rich text editor that allows the user to input and format text
+     * The `limel-text-editor` can be used as a form field
      * @exampleComponent limel-example-text-editor-basic
      * @beta 
      * @private 
      */
     interface LimelTextEditor {
+        /**
+          * 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.
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional helper text to display below the input field when it has focus
+         */
+        "helperText"?: string;
+        /**
+          * Set to `true` to indicate that the current value of the editor is invalid.
+         */
+        "invalid"?: boolean;
+        /**
+          * The label of the editor
+         */
+        "label"?: string;
+        /**
+          * The placeholder text shown inside the input field, when the field is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * 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. :::
+         */
+        "readonly"?: boolean;
+        /**
+          * Description of the text inside the editor
+         */
+        "value": { html: string };
     }
     /**
      * A tooltip can be used to display a descriptive text for any element.
@@ -2674,6 +2715,10 @@ export interface LimelProgressFlowItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelProgressFlowItemElement;
 }
+export interface LimelProsemirrorAdapterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelProsemirrorAdapterElement;
+}
 export interface LimelSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelSelectElement;
@@ -3757,6 +3802,23 @@ declare global {
         prototype: HTMLLimelProgressFlowItemElement;
         new (): HTMLLimelProgressFlowItemElement;
     };
+    /**
+     * The ProseMirror adapter offers a rich text editing experience with markdown support,
+     * in the sense that you can easily type markdown syntax and see the rendered
+     * result as rich text in real-time. For instance, you can type `# Hello, world!`
+     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * @exampleComponent limel-example-prosemirror-adapter-basic
+     * @beta 
+     * @private 
+     */
+    interface HTMLLimelProsemirrorAdapterElement extends Components.LimelProsemirrorAdapter, HTMLStencilElement {
+    }
+    var HTMLLimelProsemirrorAdapterElement: {
+        prototype: HTMLLimelProsemirrorAdapterElement;
+        new (): HTMLLimelProsemirrorAdapterElement;
+    };
     /**
      * @exampleComponent limel-example-select
      * @exampleComponent limel-example-select-with-icons
@@ -3953,12 +4015,8 @@ declare global {
         new (): HTMLLimelTableElement;
     };
     /**
-     * This editor offers a rich text editing experience with markdown support,
-     * in the sense that you can easily type markdown syntax and see the rendered
-     * result as rich text in real-time. For instance, you can type `# Hello, world!`
-     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * A rich text editor that allows the user to input and format text
+     * The `limel-text-editor` can be used as a form field
      * @exampleComponent limel-example-text-editor-basic
      * @beta 
      * @private 
@@ -4076,6 +4134,7 @@ declare global {
         "limel-portal": HTMLLimelPortalElement;
         "limel-progress-flow": HTMLLimelProgressFlowElement;
         "limel-progress-flow-item": HTMLLimelProgressFlowItemElement;
+        "limel-prosemirror-adapter": HTMLLimelProsemirrorAdapterElement;
         "limel-select": HTMLLimelSelectElement;
         "limel-shortcut": HTMLLimelShortcutElement;
         "limel-slider": HTMLLimelSliderElement;
@@ -6249,6 +6308,27 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
     }
+    /**
+     * The ProseMirror adapter offers a rich text editing experience with markdown support,
+     * in the sense that you can easily type markdown syntax and see the rendered
+     * result as rich text in real-time. For instance, you can type `# Hello, world!`
+     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * @exampleComponent limel-example-prosemirror-adapter-basic
+     * @beta 
+     * @private 
+     */
+    interface LimelProsemirrorAdapter {
+        /**
+          * Dispatched when a change is made to the editor
+         */
+        "onChange"?: (event: LimelProsemirrorAdapterCustomEvent<{ html: string }>) => void;
+        /**
+          * The value of the editor
+         */
+        "value"?: { html: string };
+    }
     /**
      * @exampleComponent limel-example-select
      * @exampleComponent limel-example-select-with-icons
@@ -6710,21 +6790,45 @@ declare namespace LocalJSX {
         "totalRows"?: number;
     }
     /**
-     * This editor offers a rich text editing experience with markdown support,
-     * in the sense that you can easily type markdown syntax and see the rendered
-     * result as rich text in real-time. For instance, you can type `# Hello, world!`
-     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * A rich text editor that allows the user to input and format text
+     * The `limel-text-editor` can be used as a form field
      * @exampleComponent limel-example-text-editor-basic
      * @beta 
      * @private 
      */
     interface LimelTextEditor {
+        /**
+          * 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.
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional helper text to display below the input field when it has focus
+         */
+        "helperText"?: string;
+        /**
+          * Set to `true` to indicate that the current value of the editor is invalid.
+         */
+        "invalid"?: boolean;
+        /**
+          * The label of the editor
+         */
+        "label"?: string;
         /**
           * Dispatched when a change is made to the editor
          */
         "onChange"?: (event: LimelTextEditorCustomEvent<{ html: string }>) => void;
+        /**
+          * The placeholder text shown inside the input field, when the field is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * 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. :::
+         */
+        "readonly"?: boolean;
+        /**
+          * Description of the text inside the editor
+         */
+        "value"?: { html: string };
     }
     /**
      * A tooltip can be used to display a descriptive text for any element.
@@ -6857,6 +6961,7 @@ declare namespace LocalJSX {
         "limel-portal": LimelPortal;
         "limel-progress-flow": LimelProgressFlow;
         "limel-progress-flow-item": LimelProgressFlowItem;
+        "limel-prosemirror-adapter": LimelProsemirrorAdapter;
         "limel-select": LimelSelect;
         "limel-shortcut": LimelShortcut;
         "limel-slider": LimelSlider;
@@ -7667,6 +7772,18 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-progress-flow-item": LocalJSX.LimelProgressFlowItem & JSXBase.HTMLAttributes<HTMLLimelProgressFlowItemElement>;
+            /**
+             * The ProseMirror adapter offers a rich text editing experience with markdown support,
+             * in the sense that you can easily type markdown syntax and see the rendered
+             * result as rich text in real-time. For instance, you can type `# Hello, world!`
+             * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+             * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+             * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+             * @exampleComponent limel-example-prosemirror-adapter-basic
+             * @beta 
+             * @private 
+             */
+            "limel-prosemirror-adapter": LocalJSX.LimelProsemirrorAdapter & JSXBase.HTMLAttributes<HTMLLimelProsemirrorAdapterElement>;
             /**
              * @exampleComponent limel-example-select
              * @exampleComponent limel-example-select-with-icons
@@ -7813,12 +7930,8 @@ declare module "@stencil/core" {
              */
             "limel-table": LocalJSX.LimelTable & JSXBase.HTMLAttributes<HTMLLimelTableElement>;
             /**
-             * This editor offers a rich text editing experience with markdown support,
-             * in the sense that you can easily type markdown syntax and see the rendered
-             * result as rich text in real-time. For instance, you can type `# Hello, world!`
-             * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-             * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-             * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+             * A rich text editor that allows the user to input and format text
+             * The `limel-text-editor` can be used as a form field
              * @exampleComponent limel-example-text-editor-basic
              * @beta 
              * @private 

package/package.json

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