npm - @limetech/lime-elements - Versions diffs - 37.64.0 → 37.64.2 - Mend

@limetech/lime-elements 37.64.0 → 37.64.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/esm/limel-text-editor.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-text-editor.entry.js","mappings":"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","names":[],"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@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\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: 5rem;\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-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\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 --limel-text-editor-placeholder-top: 0;\n min-height: 2.5rem;\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @include shared_input-select-picker.looks-disabled;\n\n limel-prosemirror-adapter {\n pointer-events: none;\n }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\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 --limel-text-editor-outline-color: transparent;\n --limel-text-editor-background-color: transparent;\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.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '';\n }\n }\n}\n\n.placeholder {\n transition-property: top, padding;\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: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\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 { CustomElement } from '../../global/shared-types/custom-element.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-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-custom-element\n * @beta\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: 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 @private\n * set to private to avoid usage while under development\n /\n @Prop()\n public plugins: CustomElement[] = [];\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 /\n @Prop({ reflect: true })\n public ui?: 'standard' \| 'minimal' = 'standard';\n\n /\n Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n plugins={this.plugins}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : undefined}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\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\">\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"],"version":3}
1	+ {"file":"limel-text-editor.entry.js","mappings":"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","names":[],"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@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\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: 5rem;\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-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\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 --limel-text-editor-placeholder-top: 0;\n min-height: 2.5rem;\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @include shared_input-select-picker.looks-disabled;\n\n limel-prosemirror-adapter {\n pointer-events: none;\n }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\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 --limel-text-editor-outline-color: transparent;\n --limel-text-editor-background-color: transparent;\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.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '';\n }\n }\n}\n\n.placeholder {\n transition-property: top, padding;\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: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\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 { CustomElement } from '../../global/shared-types/custom-element.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-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-custom-element\n * @beta\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: 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 set to private to avoid usage while under development\n \n @private\n * @alpha\n /\n @Prop()\n public plugins: CustomElement[] = [];\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 /\n @Prop({ reflect: true })\n public ui?: 'standard' \| 'minimal' = 'standard';\n\n /\n Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n plugins={this.plugins}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : undefined}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\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\">\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"],"version":3}

package/dist/esm/{markdown-parser-18863266.js → markdown-parser-3c0af898.js} RENAMED Viewed

@@ -44171,13 +44171,18 @@ async function markdownToHTML(text, options) {
 }
 function getWhiteList(allowedComponents) {
   var _a, _b;
+  const defaultSchemaClone = [...((_a = defaultSchema.attributes['*']) !== null && _a !== void 0 ? _a : [])];
+  const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {
+    return attr !== 'height';
+  });
+  asteriskAttributeWhitelist.push('style');
   const whitelist = Object.assign(Object.assign({}, defaultSchema), { tagNames: [
       ...(defaultSchema.tagNames || []),
       ...allowedComponents.map((component) => component.tagName),
     ], attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { p: [
-        ...((_a = defaultSchema.attributes.p) !== null && _a !== void 0 ? _a : []),
+        ...((_b = defaultSchema.attributes.p) !== null && _b !== void 0 ? _b : []),
         ['className', 'MsoNormal'],
-      ], '*': [...((_b = defaultSchema.attributes['*']) !== null && _b !== void 0 ? _b : []), 'style'] }) });
+      ], '*': asteriskAttributeWhitelist }) });
   for (const component of allowedComponents) {
     whitelist.attributes[component.tagName] = component.attributes;
   }
@@ -44186,4 +44191,4 @@ function getWhiteList(allowedComponents) {
 export { decodeHTML as d, markdownToHTML as m };
-//# sourceMappingURL=markdown-parser-18863266.js.map
+//# sourceMappingURL=markdown-parser-3c0af898.js.map