@limetech/lime-elements 37.64.3 → 37.65.0

package/dist/collection/components/checkbox/checkbox.css

@@ -75,6 +75,12 @@
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -788,6 +794,7 @@
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -809,6 +816,8 @@
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {

package/dist/collection/components/dynamic-label/dynamic-label.css

@@ -1,62 +1,3 @@
-@charset "UTF-8";
-/**
- * Note! This file is exported to `dist/scss/` in the published
- * node module, for consumer projects to import.
- * That means this file cannot import from any file that isn't
- * also exported, keeping the same relative path.
- *
- * Or, just don't import anything, that works too.
- */
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
 * {
   box-sizing: border-box;
   min-width: 0;
@@ -66,7 +7,7 @@
   --limel-dynamic-label-min-height: 1.75rem;
   display: flex;
   gap: 0.5rem;
-  align-items: center;
+  align-items: flex-start;
   border-radius: 0.5rem;
   min-width: 0;
 }
@@ -79,11 +20,10 @@ limel-icon {
   color: rgb(var(--contrast-900));
 }
 
-span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+label {
   flex-grow: 1;
   font-size: 0.8125rem;
+  line-height: normal;
   color: var(--mdc-theme-on-surface);
+  padding-top: 0.375rem;
 }

package/dist/collection/components/dynamic-label/dynamic-label.js

@@ -53,7 +53,7 @@ export class DynamicLabel {
     return h("limel-icon", Object.assign({}, iconProps));
   }
   renderLabel(label = '') {
-    return h("span", null, label);
+    return h("label", null, label);
   }
   static get is() { return "limel-dynamic-label"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dynamic-label/dynamic-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-label.js","sourceRoot":"","sources":["../../../src/components/dynamic-label/dynamic-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;EACzC,CAAC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,gBAAO,KAAK,CAAQ,CAAC;EAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <span>{label}</span>;\n    }\n}\n"]}
+{"version":3,"file":"dynamic-label.js","sourceRoot":"","sources":["../../../src/components/dynamic-label/dynamic-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;EACzC,CAAC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,iBAAQ,KAAK,CAAS,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <label>{label}</label>;\n    }\n}\n"]}

package/dist/collection/components/list/list.css

@@ -133,6 +133,12 @@
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -846,6 +852,7 @@
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -867,6 +874,8 @@
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {
@@ -4618,6 +4627,12 @@ a.mdc-list-item {
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -5300,6 +5315,7 @@ a.mdc-list-item {
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -5321,6 +5337,8 @@ a.mdc-list-item {
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {

package/dist/collection/components/markdown/markdown-parser.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,cAAc,EAAE,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAChC,IAAY,EACZ,OAA+B;;EAE/B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,EAAE;IAC9B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;GACnD;EAED,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;KACvB,GAAG,CAAC,WAAW,CAAC;KAChB,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,YAAY,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;KAC/C,GAAG,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KAC9C,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,cAAc,oBACZ,YAAY,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,EAAE,CAAC,EAC3C;KACD,GAAG,CAAC,GAAG,EAAE;IACN,OAAO,CAAC,IAAU,EAAE,EAAE;MAClB,8DAA8D;MAC9D,uDAAuD;MACvD,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;EACN,CAAC,CAAC;KACD,GAAG,CAAC,eAAe,CAAC;KACpB,OAAO,CAAC,IAAI,CAAC,CAAC;EAEnB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3B,CAAC;AAED,SAAS,YAAY,CAAC,iBAAkC;;EACpD,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,GAAG,CAAC,mCAAI,EAAE,CAAC,CAAC,CAAC;EACtE,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;IAClE,OAAO,IAAI,KAAK,QAAQ,CAAC;EAC7B,CAAC,CAAC,CAAC;EACH,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAEzC,MAAM,SAAS,mCACR,aAAa,KAChB,QAAQ,EAAE;MACN,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;MACjC,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;KAC7D,EACD,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,CAAC,EAAE;QACC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,CAAC,mCAAI,EAAE,CAAC;QACrC,CAAC,WAAW,EAAE,WAAW,CAAC;OAC7B,EACD,GAAG,EAAE,0BAA0B,MAEtC,CAAC;EAEF,KAAK,MAAM,SAAS,IAAI,iBAAiB,EAAE;IACvC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC;GAClE;EAED,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\n\n/**\n * Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n *\n * If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n *\n * If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n *\n * @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n */\nexport async function markdownToHTML(\n    text: string,\n    options?: markdownToHTMLOptions,\n): Promise<string> {\n    if (options?.forceHardLineBreaks) {\n        text = text.replace(/(?<!\\\\)([\\n\\r])/g, '  $1');\n    }\n\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkGfm)\n        .use(remarkRehype, { allowDangerousHtml: true })\n        .use(rehypeExternalLinks, { target: '_blank' })\n        .use(rehypeRaw)\n        .use(rehypeSanitize, {\n            ...getWhiteList(options?.whitelist ?? []),\n        })\n        .use(() => {\n            return (tree: Node) => {\n                // Run the sanitizeStyle function on all elements, to sanitize\n                // the value of the `style` attribute, if there is one.\n                visit(tree, 'element', sanitizeStyle);\n            };\n        })\n        .use(rehypeStringify)\n        .process(text);\n\n    return file.toString();\n}\n\nfunction getWhiteList(allowedComponents: CustomElement[]): Schema {\n    const defaultSchemaClone = [...(defaultSchema.attributes['*'] ?? [])];\n    const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n        return attr !== 'height';\n    });\n    asteriskAttributeWhitelist.push('style');\n\n    const whitelist: Schema = {\n        ...defaultSchema,\n        tagNames: [\n            ...(defaultSchema.tagNames || []),\n            ...allowedComponents.map((component) => component.tagName),\n        ],\n        attributes: {\n            ...defaultSchema.attributes,\n            p: [\n                ...(defaultSchema.attributes.p ?? []),\n                ['className', 'MsoNormal'],\n            ], // Allow the class 'MsoNormal' on <p> elements\n            '*': asteriskAttributeWhitelist,\n        },\n    };\n\n    for (const component of allowedComponents) {\n        whitelist.attributes[component.tagName] = component.attributes;\n    }\n\n    return whitelist;\n}\n\n/**\n * Options for markdownToHTML.\n */\nexport interface markdownToHTMLOptions {\n    /**\n     * Set to `true` to convert all soft line breaks to hard line breaks.\n     */\n    forceHardLineBreaks?: boolean;\n    whitelist?: CustomElement[];\n}\n"]}
+{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,cAAc,EAAE,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAChC,IAAY,EACZ,OAA+B;;EAE/B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,EAAE;IAC9B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;GACnD;EAED,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;KACvB,GAAG,CAAC,WAAW,CAAC;KAChB,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,YAAY,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;KAC/C,GAAG,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KAC9C,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,cAAc,oBACZ,YAAY,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,EAAE,CAAC,EAC3C;KACD,GAAG,CAAC,GAAG,EAAE;IACN,OAAO,CAAC,IAAU,EAAE,EAAE;MAClB,8DAA8D;MAC9D,uDAAuD;MACvD,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;EACN,CAAC,CAAC;KACD,GAAG,CAAC,eAAe,CAAC;KACpB,OAAO,CAAC,IAAI,CAAC,CAAC;EAEnB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3B,CAAC;AAED,SAAS,YAAY,CAAC,iBAA4C;;EAC9D,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,GAAG,CAAC,mCAAI,EAAE,CAAC,CAAC,CAAC;EACtE,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;IAClE,OAAO,IAAI,KAAK,QAAQ,CAAC;EAC7B,CAAC,CAAC,CAAC;EACH,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAEzC,MAAM,SAAS,mCACR,aAAa,KAChB,QAAQ,EAAE;MACN,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;MACjC,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;KAC7D,EACD,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,CAAC,EAAE;QACC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,CAAC,mCAAI,EAAE,CAAC;QACrC,CAAC,WAAW,EAAE,WAAW,CAAC;OAC7B,EACD,GAAG,EAAE,0BAA0B,MAEtC,CAAC;EAEF,KAAK,MAAM,SAAS,IAAI,iBAAiB,EAAE;IACvC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC;GAClE;EAED,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n *\n * If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n *\n * If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n *\n * @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n */\nexport async function markdownToHTML(\n    text: string,\n    options?: markdownToHTMLOptions,\n): Promise<string> {\n    if (options?.forceHardLineBreaks) {\n        text = text.replace(/(?<!\\\\)([\\n\\r])/g, '  $1');\n    }\n\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkGfm)\n        .use(remarkRehype, { allowDangerousHtml: true })\n        .use(rehypeExternalLinks, { target: '_blank' })\n        .use(rehypeRaw)\n        .use(rehypeSanitize, {\n            ...getWhiteList(options?.whitelist ?? []),\n        })\n        .use(() => {\n            return (tree: Node) => {\n                // Run the sanitizeStyle function on all elements, to sanitize\n                // the value of the `style` attribute, if there is one.\n                visit(tree, 'element', sanitizeStyle);\n            };\n        })\n        .use(rehypeStringify)\n        .process(text);\n\n    return file.toString();\n}\n\nfunction getWhiteList(allowedComponents: CustomElementDefinition[]): Schema {\n    const defaultSchemaClone = [...(defaultSchema.attributes['*'] ?? [])];\n    const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n        return attr !== 'height';\n    });\n    asteriskAttributeWhitelist.push('style');\n\n    const whitelist: Schema = {\n        ...defaultSchema,\n        tagNames: [\n            ...(defaultSchema.tagNames || []),\n            ...allowedComponents.map((component) => component.tagName),\n        ],\n        attributes: {\n            ...defaultSchema.attributes,\n            p: [\n                ...(defaultSchema.attributes.p ?? []),\n                ['className', 'MsoNormal'],\n            ], // Allow the class 'MsoNormal' on <p> elements\n            '*': asteriskAttributeWhitelist,\n        },\n    };\n\n    for (const component of allowedComponents) {\n        whitelist.attributes[component.tagName] = component.attributes;\n    }\n\n    return whitelist;\n}\n\n/**\n * Options for markdownToHTML.\n */\nexport interface markdownToHTMLOptions {\n    /**\n     * Set to `true` to convert all soft line breaks to hard line breaks.\n     */\n    forceHardLineBreaks?: boolean;\n    whitelist?: CustomElementDefinition[];\n}\n"]}

package/dist/collection/components/markdown/markdown.js

@@ -80,10 +80,10 @@ export class Markdown {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "CustomElement[]",
-          "resolved": "CustomElement[]",
+          "original": "CustomElementDefinition[]",
+          "resolved": "CustomElementDefinition[]",
           "references": {
-            "CustomElement": {
+            "CustomElementDefinition": {
               "location": "import",
               "path": "../../global/shared-types/custom-element.types"
             }

package/dist/collection/components/markdown/markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,QAAQ;;;;;EAmBV,KAAK,CAAC,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;MACZ,sCAAsC;MACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;EACL,CAAC;EAEM,KAAK,CAAC,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;EACvB,CAAC;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElement[];\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n            });\n            this.rootElement.innerHTML = html;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    private rootElement: HTMLDivElement;\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n}\n"]}
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,QAAQ;;;;;EAmBV,KAAK,CAAC,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;MACZ,sCAAsC;MACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;EACL,CAAC;EAEM,KAAK,CAAC,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;EACvB,CAAC;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[];\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n            });\n            this.rootElement.innerHTML = html;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    private rootElement: HTMLDivElement;\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n}\n"]}

package/dist/collection/components/menu-list/menu-list.css

@@ -139,6 +139,12 @@
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -909,6 +915,7 @@
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
@@ -935,6 +942,8 @@
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 
@@ -4688,6 +4697,12 @@ a.mdc-list-item {
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -5370,6 +5385,7 @@ a.mdc-list-item {
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -5391,6 +5407,8 @@ a.mdc-list-item {
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {

package/dist/collection/components/switch/switch.css

@@ -754,9 +754,10 @@
 }
 :host(limel-switch) {
   isolation: isolate;
+  min-height: 1.75rem;
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.5rem;
   --mdc-switch-selected-icon-color: transparent;
   --mdc-switch-unselected-icon-color: transparent;
   --mdc-switch-disabled-selected-icon-opacity: 1;
@@ -804,7 +805,7 @@
 }
 
 .mdc-switch {
-  margin-right: 0.5rem;
+  margin-top: 0.25rem;
 }
 .mdc-switch:hover {
   --mdc-switch-handle-elevation: var(--button-shadow-hovered);
@@ -835,6 +836,9 @@ label {
   /* @alternate */
   text-transform: var(--mdc-typography-body2-text-transform, inherit);
   color: var(--mdc-theme-on-surface);
+  padding-top: 0.375rem;
+  line-height: normal;
+  letter-spacing: normal;
 }
 label:not(.disabled) {
   cursor: pointer;

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/factory.js

@@ -0,0 +1,142 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
+import { inserterFactory } from './inserter';
+const isTrigger = (key, validTriggers) => {
+  return key.length === 1 && validTriggers.includes(key);
+};
+const shouldTrigger = (state) => {
+  const { $from } = state.selection;
+  if ($from.pos === 1) {
+    return true;
+  }
+  // Getting the position immediately before the current selection
+  const prevPos = $from.pos - 1;
+  if (prevPos > 0) {
+    // allow trigger if the cursor is at the start of a new paragraph
+    if ($from.parentOffset === 0) {
+      return true;
+    }
+    const prevChar = state.doc.textBetween(prevPos, $from.pos);
+    return prevChar === ' ' || prevChar === '\n';
+  }
+  return false;
+};
+const stillHasTrigger = (state, activeTrigger, triggerPosition, triggerLength) => {
+  const cursorPosition = state.selection.$from.pos;
+  if (cursorPosition < triggerPosition ||
+    cursorPosition > triggerPosition + triggerLength + 1) {
+    return false;
+  }
+  return (state.doc.textBetween(triggerPosition, triggerPosition + 1) ===
+    activeTrigger);
+};
+const getTriggerEventDetail = (view, trigger, value) => {
+  return {
+    trigger: trigger,
+    textEditor: inserterFactory(view),
+    value: value,
+  };
+};
+const sendTriggerEvent = (type, view, trigger, value) => {
+  const event = new CustomEvent(type, {
+    detail: getTriggerEventDetail(view, trigger, value),
+    bubbles: true,
+    composed: true,
+  });
+  view.dom.dispatchEvent(event);
+};
+const processTransactions = (text, transactions, oldState) => {
+  let textAdded = '';
+  let textRemoved = '';
+  transactions.forEach((transaction) => {
+    if (transaction.docChanged) {
+      transaction.steps.forEach((step) => {
+        if (step instanceof ReplaceStep ||
+          step instanceof ReplaceAroundStep) {
+          const slice = step.slice;
+          const fromPos = step.from;
+          const toPos = step.to;
+          if (slice === null || slice === void 0 ? void 0 : slice.size) {
+            // Text added
+            textAdded += slice.content.textBetween(0, slice.size);
+          }
+          else if (fromPos !== toPos) {
+            // Text removed
+            const removedText = oldState.doc.textBetween(fromPos, toPos);
+            textRemoved += removedText;
+          }
+        }
+      });
+    }
+  });
+  if (textAdded) {
+    text += textAdded;
+  }
+  else if (textRemoved) {
+    text = text.slice(0, -textRemoved.length);
+  }
+  return text;
+};
+export const createTriggerPlugin = (triggerCharacters) => {
+  let activeTrigger = null;
+  let triggerText = '';
+  let pluginView = null;
+  let triggerPosition = null;
+  const stopTrigger = () => {
+    triggerText = '';
+    sendTriggerEvent('triggerStop', pluginView, activeTrigger, triggerText);
+    triggerPosition = null;
+    activeTrigger = null;
+  };
+  const handleKeyDown = (view, event) => {
+    const { state } = view;
+    if (event.key === 'Escape') {
+      stopTrigger();
+      return true;
+    }
+    if (isTrigger(event.key, triggerCharacters) && shouldTrigger(state)) {
+      activeTrigger = event.key;
+      triggerText = '';
+      triggerPosition = state.selection.$from.pos - triggerText.length;
+      sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);
+      return false;
+    }
+    return false;
+  };
+  const appendTransactions = (transactions, oldState, newState) => {
+    if (!activeTrigger || !triggerPosition || !pluginView) {
+      return;
+    }
+    if (!stillHasTrigger(newState, activeTrigger, triggerPosition, triggerText.length)) {
+      return;
+    }
+    const updatedText = processTransactions(triggerText, transactions, oldState);
+    if (updatedText !== triggerText) {
+      triggerText = updatedText;
+      sendTriggerEvent('triggerChange', pluginView, activeTrigger, triggerText.slice(1));
+    }
+  };
+  return new Plugin({
+    key: new PluginKey('triggerPlugin'),
+    view: (view) => {
+      pluginView = view;
+      return {};
+    },
+    state: {
+      init: () => {
+        return {};
+      },
+      apply: (transaction) => {
+        if (transaction.getMeta('stopTrigger')) {
+          stopTrigger();
+        }
+        return {};
+      },
+    },
+    props: {
+      handleKeyDown: handleKeyDown,
+    },
+    appendTransaction: appendTransactions,
+  });
+};
+//# sourceMappingURL=factory.js.map

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts"],"names":[],"mappings":"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","sourcesContent":["import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';\nimport { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';\nimport { EditorView } from 'prosemirror-view';\nimport { inserterFactory } from './inserter';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n} from 'src/components/text-editor/text-editor.types';\n\nconst isTrigger = (\n    key: string,\n    validTriggers: TriggerCharacter[],\n): key is TriggerCharacter => {\n    return key.length === 1 && validTriggers.includes(key as TriggerCharacter);\n};\n\nconst shouldTrigger = (state: EditorState): boolean => {\n    const { $from } = state.selection;\n\n    if ($from.pos === 1) {\n        return true;\n    }\n\n    // Getting the position immediately before the current selection\n    const prevPos = $from.pos - 1;\n\n    if (prevPos > 0) {\n        // allow trigger if the cursor is at the start of a new paragraph\n        if ($from.parentOffset === 0) {\n            return true;\n        }\n\n        const prevChar = state.doc.textBetween(prevPos, $from.pos);\n\n        return prevChar === ' ' || prevChar === '\\n';\n    }\n\n    return false;\n};\n\nconst stillHasTrigger = (\n    state: EditorState,\n    activeTrigger: string,\n    triggerPosition: number,\n    triggerLength: number,\n): boolean => {\n    const cursorPosition = state.selection.$from.pos;\n\n    if (\n        cursorPosition < triggerPosition ||\n        cursorPosition > triggerPosition + triggerLength + 1\n    ) {\n        return false;\n    }\n\n    return (\n        state.doc.textBetween(triggerPosition, triggerPosition + 1) ===\n        activeTrigger\n    );\n};\n\nconst getTriggerEventDetail = (\n    view: EditorView,\n    trigger: TriggerCharacter,\n    value: string,\n): TriggerEventDetail => {\n    return {\n        trigger: trigger,\n        textEditor: inserterFactory(view),\n        value: value,\n    };\n};\n\nconst sendTriggerEvent = (\n    type: 'triggerStart' | 'triggerStop' | 'triggerChange',\n    view: EditorView,\n    trigger: TriggerCharacter,\n    value: string,\n) => {\n    const event = new CustomEvent<TriggerEventDetail>(type, {\n        detail: getTriggerEventDetail(view, trigger, value),\n        bubbles: true,\n        composed: true,\n    });\n    view.dom.dispatchEvent(event);\n};\n\nconst processTransactions = (\n    text: string,\n    transactions: Transaction[],\n    oldState: EditorState,\n): string => {\n    let textAdded = '';\n    let textRemoved = '';\n\n    transactions.forEach((transaction) => {\n        if (transaction.docChanged) {\n            transaction.steps.forEach((step) => {\n                if (\n                    step instanceof ReplaceStep ||\n                    step instanceof ReplaceAroundStep\n                ) {\n                    const slice = step.slice;\n                    const fromPos = step.from;\n                    const toPos = step.to;\n\n                    if (slice?.size) {\n                        // Text added\n                        textAdded += slice.content.textBetween(0, slice.size);\n                    } else if (fromPos !== toPos) {\n                        // Text removed\n                        const removedText = oldState.doc.textBetween(\n                            fromPos,\n                            toPos,\n                        );\n                        textRemoved += removedText;\n                    }\n                }\n            });\n        }\n    });\n\n    if (textAdded) {\n        text += textAdded;\n    } else if (textRemoved) {\n        text = text.slice(0, -textRemoved.length);\n    }\n\n    return text;\n};\n\nexport const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {\n    let activeTrigger: TriggerCharacter | null = null;\n    let triggerText = '';\n    let pluginView: EditorView | null = null;\n    let triggerPosition: number | null = null;\n\n    const stopTrigger = () => {\n        triggerText = '';\n        sendTriggerEvent('triggerStop', pluginView, activeTrigger, triggerText);\n        triggerPosition = null;\n        activeTrigger = null;\n    };\n\n    const handleKeyDown = (view: EditorView, event: any) => {\n        const { state } = view;\n\n        if (event.key === 'Escape') {\n            stopTrigger();\n\n            return true;\n        }\n\n        if (isTrigger(event.key, triggerCharacters) && shouldTrigger(state)) {\n            activeTrigger = event.key;\n            triggerText = '';\n            triggerPosition = state.selection.$from.pos - triggerText.length;\n            sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);\n\n            return false;\n        }\n\n        return false;\n    };\n\n    const appendTransactions = (\n        transactions: Transaction[],\n        oldState: EditorState,\n        newState: EditorState,\n    ): Transaction => {\n        if (!activeTrigger || !triggerPosition || !pluginView) {\n            return;\n        }\n\n        if (\n            !stillHasTrigger(\n                newState,\n                activeTrigger,\n                triggerPosition,\n                triggerText.length,\n            )\n        ) {\n            return;\n        }\n\n        const updatedText = processTransactions(\n            triggerText,\n            transactions,\n            oldState,\n        );\n\n        if (updatedText !== triggerText) {\n            triggerText = updatedText;\n            sendTriggerEvent(\n                'triggerChange',\n                pluginView,\n                activeTrigger,\n                triggerText.slice(1),\n            );\n        }\n    };\n\n    return new Plugin({\n        key: new PluginKey('triggerPlugin'),\n        view: (view: EditorView) => {\n            pluginView = view;\n\n            return {};\n        },\n        state: {\n            init: () => {\n                return {};\n            },\n            apply: (transaction: Transaction) => {\n                if (transaction.getMeta('stopTrigger')) {\n                    stopTrigger();\n                }\n\n                return {};\n            },\n        },\n        props: {\n            handleKeyDown: handleKeyDown,\n        },\n        appendTransaction: appendTransactions,\n    });\n};\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.js

@@ -0,0 +1,51 @@
+export const inserterFactory = (view) => {
+  const startPos = getTriggerStartPosition(view);
+  return {
+    insert: (input) => {
+      const { state, dispatch } = view;
+      const { schema, selection } = state;
+      const { $from } = selection;
+      let node;
+      try {
+        node = createNode(input, schema);
+      }
+      catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error.message);
+        return;
+      }
+      const spaceNode = schema.text(' ');
+      const fragment = schema.nodes.doc.create(null, [node, spaceNode]);
+      const transaction = state.tr.replaceWith(startPos, $from.pos, fragment);
+      transaction.setMeta('stopTrigger', true);
+      dispatch(transaction);
+    },
+  };
+};
+const createNode = (input, schema) => {
+  var _a;
+  if (typeof input === 'string') {
+    return schema.text(input);
+  }
+  const node = input.node;
+  if (typeof node === 'string') {
+    return schema.text(node);
+  }
+  const customNode = getCustomNode(node.tagName, schema);
+  const childNodes = ((_a = input.children) !== null && _a !== void 0 ? _a : [])
+    .map((child) => createNode(child, schema))
+    .filter(Boolean);
+  return customNode.create(node.attributes, childNodes);
+};
+const getCustomNode = (name, schema) => {
+  const customNode = Object.values(schema.nodes).find((prosemirrorNode) => prosemirrorNode.name === name);
+  if (!customNode) {
+    throw new Error(`A custom element hasn't been registered for node ${name}`);
+  }
+  return customNode;
+};
+const getTriggerStartPosition = (view) => {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = view.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.pos;
+};
+//# sourceMappingURL=inserter.js.map

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inserter.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAc,EAAE;EAC5D,MAAM,QAAQ,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;EAE/C,OAAO;IACH,MAAM,EAAE,CAAC,KAA8B,EAAE,EAAE;MACvC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;MACjC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;MACpC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;MAE5B,IAAI,IAAU,CAAC;MAEf,IAAI;QACA,IAAI,GAAG,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;OACpC;MAAC,OAAO,KAAK,EAAE;QACZ,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAE7B,OAAO;OACV;MAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAEnC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;MAElE,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC,WAAW,CACpC,QAAQ,EACR,KAAK,CAAC,GAAG,EACT,QAAQ,CACX,CAAC;MAEF,WAAW,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;MACzC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC;GACJ,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,MAAc,EAAQ,EAAE;;EACxE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC7B;EAED,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;EAExB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EAEvD,MAAM,UAAU,GAAW,CAAC,MAAA,KAAK,CAAC,QAAQ,mCAAI,EAAE,CAAC;KAC5C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KACzC,MAAM,CAAC,OAAO,CAAC,CAAC;EAErB,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,MAAc,EAAY,EAAE;EAC7D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAC/C,CAAC,eAAe,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,KAAK,IAAI,CACrD,CAAC;EAEF,IAAI,CAAC,UAAU,EAAE;IACb,MAAM,IAAI,KAAK,CACX,oDAAoD,IAAI,EAAE,CAC7D,CAAC;GACL;EAED,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,IAAgB,EAAU,EAAE;;EACzD,OAAO,MAAA,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,KAAK,0CAAE,GAAG,CAAC;AAC7C,CAAC,CAAC","sourcesContent":["import { Node, NodeType, Schema } from 'prosemirror-model';\nimport { EditorView } from 'prosemirror-view';\nimport {\n    TextEditor,\n    TextEditorNode,\n} from 'src/components/text-editor/text-editor.types';\n\nexport const inserterFactory = (view: EditorView): TextEditor => {\n    const startPos = getTriggerStartPosition(view);\n\n    return {\n        insert: (input: TextEditorNode | string) => {\n            const { state, dispatch } = view;\n            const { schema, selection } = state;\n            const { $from } = selection;\n\n            let node: Node;\n\n            try {\n                node = createNode(input, schema);\n            } catch (error) {\n                // eslint-disable-next-line no-console\n                console.error(error.message);\n\n                return;\n            }\n\n            const spaceNode = schema.text(' ');\n\n            const fragment = schema.nodes.doc.create(null, [node, spaceNode]);\n\n            const transaction = state.tr.replaceWith(\n                startPos,\n                $from.pos,\n                fragment,\n            );\n\n            transaction.setMeta('stopTrigger', true);\n            dispatch(transaction);\n        },\n    };\n};\n\nconst createNode = (input: TextEditorNode | string, schema: Schema): Node => {\n    if (typeof input === 'string') {\n        return schema.text(input);\n    }\n\n    const node = input.node;\n\n    if (typeof node === 'string') {\n        return schema.text(node);\n    }\n\n    const customNode = getCustomNode(node.tagName, schema);\n\n    const childNodes: Node[] = (input.children ?? [])\n        .map((child) => createNode(child, schema))\n        .filter(Boolean);\n\n    return customNode.create(node.attributes, childNodes);\n};\n\nconst getCustomNode = (name: string, schema: Schema): NodeType => {\n    const customNode = Object.values(schema.nodes).find(\n        (prosemirrorNode) => prosemirrorNode.name === name,\n    );\n\n    if (!customNode) {\n        throw new Error(\n            `A custom element hasn't been registered for node ${name}`,\n        );\n    }\n\n    return customNode;\n};\n\nconst getTriggerStartPosition = (view: EditorView): number => {\n    return view.state?.selection?.$from?.pos;\n};\n"]}