npm - @limetech/lime-elements - Versions diffs - 37.75.3 → 37.76.0 - Mend

@limetech/lime-elements 37.75.3 → 37.76.0

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 (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,19 @@
+## [37.76.0](https://github.com/Lundalogik/lime-elements/compare/v37.75.4...v37.76.0) (2024-12-11)
+### Features
+* **popover:** add new CSS variable for controlling surface's `box-shadow` ([dc27cd8](https://github.com/Lundalogik/lime-elements/commit/dc27cd88c74f2a2712a6b0bd2242148cb4256452))
+## [37.75.4](https://github.com/Lundalogik/lime-elements/compare/v37.75.3...v37.75.4) (2024-12-10)
+### Bug Fixes
+* **text-editor:** don't show placeholder when composer is active ([8aba357](https://github.com/Lundalogik/lime-elements/commit/8aba3571fc0bf43b46622c00e3b46becd6c86f2d))
 ## [37.75.3](https://github.com/Lundalogik/lime-elements/compare/v37.75.2...v37.75.3) (2024-12-10)

package/dist/cjs/limel-popover_2.cjs.entry.js CHANGED Viewed

@@ -119,6 +119,7 @@ const Popover = class {
       '--popover-surface-width',
       '--popover-body-background-color',
       '--popover-border-radius',
+      '--popover-box-shadow',
     ];
     const style = getComputedStyle(this.host);
     const values = propertyNames.map((property) => {
@@ -133,7 +134,7 @@ const Popover = class {
 };
 Popover.style = popoverCss;
-const popoverSurfaceCss = "@charset \"UTF-8\";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}";
+const popoverSurfaceCss = "@charset \"UTF-8\";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}";
 const PopoverSurface = class {
   constructor(hostRef) {

package/dist/cjs/limel-popover_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}
1	+ {"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d1052409.js');
 const randomString = require('./random-string-e8ad4419.js');
-const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(\n      0.19,\n      0.23,\n      0.26,\n      0.89\n  );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:\"\";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{transition-property:top, padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
+const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(\n      0.19,\n      0.23,\n      0.26,\n      0.89\n  );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor:focus-within) .placeholder,:host(limel-text-editor:focus) .placeholder{opacity:0}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:\"\";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{transition-property:top, padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
 const TextEditor = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"limel-text-editor.entry.cjs.js","mappings":"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","names":["h","createRandomString","Host"],"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 { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-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 * @exampleComponent limel-example-text-editor-triggers\n * @beta\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: { delegatesFocus: true },\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n A list of custom elements\n \n Any `CustomElement` that should be used inside the text editor needs\n * to be defined here.\n \n @private\n * @alpha\n /\n @Prop()\n public customElements: CustomElementDefinition[] = [];\n\n /\n A set of trigger characters\n \n Defining a character here will enable trigger events to be sent if the\n * character is detected in the editor.\n \n @private\n * @alpha\n /\n @Prop()\n public triggers: TriggerCharacter[] = [];\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Specifies the visual appearance of the editor.\n \n - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n /\n @Prop({ reflect: true })\n public ui?: EditorUiType = 'standard';\n\n /\n Dispatched when a change is made to the editor\n /\n @Event()\n public change: EventEmitter<string>;\n\n /\n Dispatched if a trigger character is detected.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStart: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a trigger session is ended. That is if the selection\n * goes outside the trigger input or if something is inserted using the\n * supplied `TextEditor` insert function.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStop: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a input is changed during an active trigger.\n \n @private\n * @alpha\n */\n @Event()\n public triggerChange: EventEmitter<TriggerEventDetail>;\n\n private 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 customElements={this.customElements}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n aria-disabled={this.disabled}\n language={this.language}\n triggerCharacters={this.triggers}\n disabled={this.disabled}\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.cjs.js","mappings":"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","names":["h","createRandomString","Host"],"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:focus-within),\n:host(limel-text-editor:focus) {\n .placeholder {\n opacity: 0;\n }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @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 { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-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 * @exampleComponent limel-example-text-editor-triggers\n * @beta\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: { delegatesFocus: true },\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n A list of custom elements\n \n Any `CustomElement` that should be used inside the text editor needs\n * to be defined here.\n \n @private\n * @alpha\n /\n @Prop()\n public customElements: CustomElementDefinition[] = [];\n\n /\n A set of trigger characters\n \n Defining a character here will enable trigger events to be sent if the\n * character is detected in the editor.\n \n @private\n * @alpha\n /\n @Prop()\n public triggers: TriggerCharacter[] = [];\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Specifies the visual appearance of the editor.\n \n - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n /\n @Prop({ reflect: true })\n public ui?: EditorUiType = 'standard';\n\n /\n Dispatched when a change is made to the editor\n /\n @Event()\n public change: EventEmitter<string>;\n\n /\n Dispatched if a trigger character is detected.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStart: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a trigger session is ended. That is if the selection\n * goes outside the trigger input or if something is inserted using the\n * supplied `TextEditor` insert function.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStop: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a input is changed during an active trigger.\n \n @private\n * @alpha\n */\n @Event()\n public triggerChange: EventEmitter<TriggerEventDetail>;\n\n private 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 customElements={this.customElements}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n aria-disabled={this.disabled}\n language={this.language}\n triggerCharacters={this.triggers}\n disabled={this.disabled}\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/collection/components/popover/popover.css CHANGED Viewed

@@ -1,8 +1,9 @@
 /**
- * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`
- * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.
- * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.
+ * @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`
+ * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.
+ * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.
  * @prop --popover-z-index: z-index of the popover.
+ * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.
  */
 .trigger-anchor {
   display: inline-block;

package/dist/collection/components/popover/popover.js CHANGED Viewed

@@ -46,6 +46,7 @@ import { ESCAPE } from '../../util/keycodes';
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover-basic
  * @exampleComponent limel-example-popover-trigger-interaction
+ * @exampleComponent limel-example-popover-styling
  */
 export class Popover {
   constructor() {
@@ -119,6 +120,7 @@ export class Popover {
       '--popover-surface-width',
       '--popover-body-background-color',
       '--popover-border-radius',
+      '--popover-box-shadow',
     ];
     const style = getComputedStyle(this.host);
     const values = propertyNames.map((property) => {

package/dist/collection/components/popover/popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG~~;AAMH,MAAM,OAAO,OAAO;EAwBhB;~~IA+EQ~~,yBAAoB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACpD,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QACtB,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,OAAoB,EAAE,EAAE;MACpD,MAAM,UAAU,GAAG;QACf,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,IAAI,EAAE,QAAQ;OACjB,CAAC;MAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACnD,IAAI,CAAC,KAAK,EAAE;UACR,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;OACJ;IACL,CAAC,CAAC;~~gBA3HY~~,KAAK;;IAoBf,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClE;EAGS,SAAS;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAEM,kBAAkB;IACrB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,WAAW,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;EACtE,CAAC;EAEO,mBAAmB;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE;QACzD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACjE;SAAM;MACH,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACpE;EACL,CAAC;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,gBAAgB;MACvB,YAAM,IAAI,EAAC,SAAS,GAAG;MACvB,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,aAAa;QAEjC,6BACI,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACrC,KAAK,EAAE,aAAa,GACtB,CACS,CACb,CACT,CAAC;EACN,CAAC;EAEO,mBAAmB,CAAC,KAAiB;IACzC,MAAM,OAAO,GAAgB,KAAK,CAAC,MAAqB,CAAC;IACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;MAC7B,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;EACL,CAAC;EAEO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,yBAAyB;MACzB,iCAAiC;MACjC,yBAAyB;~~KAC5B~~,CAAC;IACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MAC1C,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;EAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BJ","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/*\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n"]}
1	+ {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/*\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n"]}

package/dist/collection/components/popover-surface/popover-surface.css CHANGED Viewed

@@ -78,7 +78,7 @@
   min-width: 0;
   min-height: 0;
   border-radius: var(--popover-border-radius, 0.75rem);
-  box-shadow: var(--shadow-depth-16);
+  box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));
   backdrop-filter: blur(0.3125rem);
   -webkit-backdrop-filter: blur(0.3125rem);
 }

package/dist/collection/components/text-editor/text-editor.css CHANGED Viewed

@@ -198,6 +198,11 @@
   --limel-text-editor-outline-color: var(--mdc-theme-primary);
 }
+:host(limel-text-editor:focus-within) .placeholder,
+:host(limel-text-editor:focus) .placeholder {
+  opacity: 0;
+}
 :host(limel-text-editor[disabled]:not([disabled=false])) {
   cursor: not-allowed;
   opacity: 0.4;

package/dist/esm/limel-popover_2.entry.js CHANGED Viewed

@@ -115,6 +115,7 @@ const Popover = class {
       '--popover-surface-width',
       '--popover-body-background-color',
       '--popover-border-radius',
+      '--popover-box-shadow',
     ];
     const style = getComputedStyle(this.host);
     const values = propertyNames.map((property) => {
@@ -129,7 +130,7 @@ const Popover = class {
 };
 Popover.style = popoverCss;
-const popoverSurfaceCss = "@charset \"UTF-8\";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}";
+const popoverSurfaceCss = "@charset \"UTF-8\";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}";
 const PopoverSurface = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"limel-popover.limel-popover-surface.entry.js","mappings":"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","names":[],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}
1	+ {"file":"limel-popover.limel-popover-surface.entry.js","mappings":";;;;;;;;;;AAAA;;;;;;;;;;;SAWgB,cAAc,CAC1B,OAAoB,EACpB,KAAkB;;EAElB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAI,MAAA,OAAO,CAAC,UAAU,0CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA,EAAE;IAChE,OAAO,IAAI,CAAC;GACf;EAED,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;EACjC,IAAI,CAAC,MAAM,EAAE;IACT,OAAO,KAAK,CAAC;GAChB;EAED,OAAO,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC;AAED,SAAS,UAAU,CAAC,OAAoB;EACpC,MAAM,MAAM,GAAQ,OAAO,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;EAChE,IAAI,MAAM,EAAE;IACR,OAAO,MAAM,CAAC,YAAY,CAAC;GAC9B;EAED,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW,EAAgB,CAAC;EAErD,OAAO,QAAQ,CAAC,IAAI,CAAC;AACzB;;ACpCA,MAAM,UAAU,GAAG,yDAAyD;;MCiE/D,OAAO;EAwBhB;;;IAgFQ,yBAAoB,GAAG,CAAC,KAAoB;MAChD,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QACtB,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,yBAAoB,GAAG,CAAC,OAAoB;MAChD,MAAM,UAAU,GAAG;QACf,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,IAAI,EAAE,QAAQ;OACjB,CAAC;MAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACnD,IAAI,CAAC,KAAK,EAAE;UACR,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;OACJ;KACJ,CAAC;gBA5HY,KAAK;;IAoBf,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClE;EAGS,SAAS;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC9B;EAEM,iBAAiB;IACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC9B;EAEM,kBAAkB;IACrB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,WAAW,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;GACrE;EAEO,mBAAmB;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE;QACzD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACjE;SAAM;MACH,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACpE;GACJ;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,QACI,WAAK,KAAK,EAAC,gBAAgB,IACvB,YAAM,IAAI,EAAC,SAAS,GAAG,EACvB,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,6BACI,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACrC,KAAK,EAAE,aAAa,GACtB,CACS,CACb,EACR;GACL;EAEO,mBAAmB,CAAC,KAAiB;IACzC,MAAM,OAAO,GAAgB,KAAK,CAAC,MAAqB,CAAC;IACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;MAC7B,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;GACJ;EAEO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,yBAAyB;MACzB,iCAAiC;MACjC,yBAAyB;MACzB,sBAAsB;KACzB,CAAC;IACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ;MACtC,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;KAC3C,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;GAC3C;;;;;;;;ACvKL,MAAM,iBAAiB,GAAG,ogCAAogC;;MCYjhC,cAAc;;;;;EAUhB,gBAAgB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACxB;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,uBAAuB,EAAC,QAAQ,EAAC,GAAG,GAAG,CAAC;GAC7D;EAEO,aAAa;IACjB,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wBAAwB,CAC3B,CAAC;IAEF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;MAC7C,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,OAAO;OACV;MAED,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACtC,CAAC,CAAC;GACN;;;;;;;","names":[],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-6156b4fd.js';
 import { c as createRandomString } from './random-string-e74dc48d.js';
-const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(\n      0.19,\n      0.23,\n      0.26,\n      0.89\n  );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:\"\";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{transition-property:top, padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
+const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(\n      0.19,\n      0.23,\n      0.26,\n      0.89\n  );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor:focus-within) .placeholder,:host(limel-text-editor:focus) .placeholder{opacity:0}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:\"\";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{transition-property:top, padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
 const TextEditor = class {
   constructor(hostRef) {

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 { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-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 * @exampleComponent limel-example-text-editor-triggers\n * @beta\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: { delegatesFocus: true },\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n A list of custom elements\n \n Any `CustomElement` that should be used inside the text editor needs\n * to be defined here.\n \n @private\n * @alpha\n /\n @Prop()\n public customElements: CustomElementDefinition[] = [];\n\n /\n A set of trigger characters\n \n Defining a character here will enable trigger events to be sent if the\n * character is detected in the editor.\n \n @private\n * @alpha\n /\n @Prop()\n public triggers: TriggerCharacter[] = [];\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Specifies the visual appearance of the editor.\n \n - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n /\n @Prop({ reflect: true })\n public ui?: EditorUiType = 'standard';\n\n /\n Dispatched when a change is made to the editor\n /\n @Event()\n public change: EventEmitter<string>;\n\n /\n Dispatched if a trigger character is detected.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStart: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a trigger session is ended. That is if the selection\n * goes outside the trigger input or if something is inserted using the\n * supplied `TextEditor` insert function.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStop: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a input is changed during an active trigger.\n \n @private\n * @alpha\n */\n @Event()\n public triggerChange: EventEmitter<TriggerEventDetail>;\n\n private 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 customElements={this.customElements}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n aria-disabled={this.disabled}\n language={this.language}\n triggerCharacters={this.triggers}\n disabled={this.disabled}\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:focus-within),\n:host(limel-text-editor:focus) {\n .placeholder {\n opacity: 0;\n }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @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 { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-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 * @exampleComponent limel-example-text-editor-triggers\n * @beta\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: { delegatesFocus: true },\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n A list of custom elements\n \n Any `CustomElement` that should be used inside the text editor needs\n * to be defined here.\n \n @private\n * @alpha\n /\n @Prop()\n public customElements: CustomElementDefinition[] = [];\n\n /\n A set of trigger characters\n \n Defining a character here will enable trigger events to be sent if the\n * character is detected in the editor.\n \n @private\n * @alpha\n /\n @Prop()\n public triggers: TriggerCharacter[] = [];\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Specifies the visual appearance of the editor.\n \n - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n /\n @Prop({ reflect: true })\n public ui?: EditorUiType = 'standard';\n\n /\n Dispatched when a change is made to the editor\n /\n @Event()\n public change: EventEmitter<string>;\n\n /\n Dispatched if a trigger character is detected.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStart: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a trigger session is ended. That is if the selection\n * goes outside the trigger input or if something is inserted using the\n * supplied `TextEditor` insert function.\n \n @private\n * @alpha\n /\n @Event()\n public triggerStop: EventEmitter<TriggerEventDetail>;\n\n /\n Dispatched if a input is changed during an active trigger.\n \n @private\n * @alpha\n */\n @Event()\n public triggerChange: EventEmitter<TriggerEventDetail>;\n\n private 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 customElements={this.customElements}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n aria-disabled={this.disabled}\n language={this.language}\n triggerCharacters={this.triggers}\n disabled={this.disabled}\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/lime-elements/lime-elements.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-67e7d211",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-a451cece",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-ba4098bc",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-68a8b724",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-488decb0",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-bc223807",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-6500050d",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-492f97a6",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20b6fddc",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-1b7d52d8",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-60570bdc",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-d6eb9c6f",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-634a3b1a",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-05c10bed",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-ef42256f",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-cbfa96be",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-f3a613a3",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-1e99b371",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-603ce062",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-5d3b275e",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-9addc6b3",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8579a166",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-a2eee29e",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-30ca30ec",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-29dd2fee",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-57745b23",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-59da42c9",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-4bfcb8c7",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5d08ef7d",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-d93f1964",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-9f8aa8e7",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-aad274aa",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-f9599a0c",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["p-2cbfe8f9",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-493e2b10",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-0ee1d461",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-e54d3ef2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-18b068c9",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["p-a8412bd0",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
+import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-9fae6488",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-a451cece",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-ba4098bc",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-68a8b724",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-488decb0",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-bc223807",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-6500050d",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-492f97a6",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20b6fddc",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-1b7d52d8",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-60570bdc",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-d6eb9c6f",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-634a3b1a",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-05c10bed",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-ef42256f",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-cbfa96be",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-f3a613a3",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-1e99b371",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-603ce062",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-5d3b275e",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-9addc6b3",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8579a166",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-a2eee29e",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-30ca30ec",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-29dd2fee",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-57745b23",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-59da42c9",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-4bfcb8c7",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5d08ef7d",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-d93f1964",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-9f8aa8e7",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-aad274aa",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-f9599a0c",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["p-2cbfe8f9",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-493e2b10",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-0ee1d461",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-e54d3ef2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-18b068c9",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["p-ec3fd127",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-9fae6488.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as r,H as i}from"./p-443111b3.js";import{c as o}from"./p-96460db3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(\n 0.19,\n 0.23,\n 0.26,\n 0.89\n );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor:focus-within) .placeholder,:host(limel-text-editor:focus) .placeholder{opacity:0}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:"";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:""}.placeholder{transition-property:top, padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}';const a=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.triggerStart=t(this,"triggerStart",7);this.triggerStop=t(this,"triggerStop",7);this.triggerChange=t(this,"triggerChange",7);this.renderHelperLine=()=>{if(!this.helperText){return}return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.isInvalid()})};this.isInvalid=()=>{if(this.readonly){return false}if(this.invalid){return true}};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.contentType="markdown";this.language="en";this.disabled=false;this.readonly=false;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=false;this.value=undefined;this.customElements=[];this.triggers=[];this.required=false;this.allowResize=true;this.ui="standard";this.helperTextId=o();this.editorId=o()}render(){return r(i,{class:{"has-helper-text":!!this.helperText}},r("span",{class:"notched-outline"},r("span",{class:"leading-outline"}),this.renderLabel(),r("span",{class:"trailing-outline"})),this.renderEditor())}renderEditor(){if(this.readonly&&!this.value){return[r("span",{class:"lime-looks-like-input-value"},"–"),this.renderHelperLine()]}if(this.readonly){return[r("limel-markdown",{value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}return[r("limel-prosemirror-adapter",{"aria-placeholder":this.placeholder,contentType:this.contentType,onChange:this.handleChange,customElements:this.customElements,value:this.value,"aria-controls":this.helperTextId,id:this.editorId,"aria-disabled":this.disabled,language:this.language,triggerCharacters:this.triggers,disabled:this.disabled}),this.renderPlaceholder(),this.renderHelperLine()]}renderLabel(){if(!this.label){return}return r("span",{class:"notch"},r("label",{htmlFor:this.editorId},this.label))}renderPlaceholder(){if(!this.placeholder\|\|this.value){return}return r("span",{class:"placeholder","aria-hidden":"true"},this.placeholder)}static get delegatesFocus(){return true}};a.style=l;export{a as limel_text_editor};
2	+ //# sourceMappingURL=p-9fae6488.entry.js.map

package/dist/lime-elements/p-9fae6488.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","customElements","disabled","language","triggerCharacters","triggers","label","htmlFor"],"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:focus-within),\n:host(limel-text-editor:focus) {\n .placeholder {\n opacity: 0;\n }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @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 { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-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 * @exampleComponent limel-example-text-editor-triggers\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: { delegatesFocus: true },\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * A list of custom elements\n *\n * Any `CustomElement` that should be used inside the text editor needs\n * to be defined here.\n *\n * @private\n * @alpha\n */\n @Prop()\n public customElements: CustomElementDefinition[] = [];\n\n /**\n * A set of trigger characters\n *\n * Defining a character here will enable trigger events to be sent if the\n * character is detected in the editor.\n *\n * @private\n * @alpha\n */\n @Prop()\n public triggers: TriggerCharacter[] = [];\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Specifies the visual appearance of the editor.\n *\n * - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n */\n @Prop({ reflect: true })\n public ui?: EditorUiType = 'standard';\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n /**\n * Dispatched if a trigger character is detected.\n *\n * @private\n * @alpha\n */\n @Event()\n public triggerStart: EventEmitter<TriggerEventDetail>;\n\n /**\n * Dispatched if a trigger session is ended. That is if the selection\n * goes outside the trigger input or if something is inserted using the\n * supplied `TextEditor` insert function.\n *\n * @private\n * @alpha\n */\n @Event()\n public triggerStop: EventEmitter<TriggerEventDetail>;\n\n /**\n * Dispatched if a input is changed during an active trigger.\n *\n * @private\n * @alpha\n */\n @Event()\n public triggerChange: EventEmitter<TriggerEventDetail>;\n\n private 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 customElements={this.customElements}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n aria-disabled={this.disabled}\n language={this.language}\n triggerCharacters={this.triggers}\n disabled={this.disabled}\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"],"mappings":"6FAAA,MAAMA,EAAgB,8rO,MCmCTC,EAAU,MAgKnBC,YAAAC,G,0KAqFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA1QQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,yCAkBwB,G,cAYb,G,cAYV,M,iBAOE,K,QAYH,WAyCvBb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfmB,eAAgB3B,KAAK2B,eACrBN,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SAAQ,gBACFf,KAAK4B,SACpBC,SAAU7B,KAAK6B,SACfC,kBAAmB9B,KAAK+B,SACxBH,SAAU5B,KAAK4B,WAEnB5B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAKgC,MAAO,CACb,M,CAGJ,OACI7B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO8B,QAASjC,KAAKe,UAAWf,KAAKgC,O,CAKzCT,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}

package/dist/lime-elements/p-ec3fd127.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as o,h as t,g as r}from"./p-443111b3.js";import{c as i}from"./p-96460db3.js";import{E as s}from"./p-e03dfe70.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,o){var t;if(e.contains(o)\|\|((t=e.shadowRoot)===null\|\|t===void 0?void 0:t.contains(o))){return true}const r=c(o);if(!r){return false}return a(e,r)}function c(e){const o=e.closest(".limel-portal--container");if(o){return o.portalSource}const t=e.getRootNode();return t.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(t){e(this,t);this.close=o(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const o={"aria-haspopup":true,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[t,r]of Object.entries(o)){if(!r){e.removeAttribute(t)}else{e.setAttribute(t,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}setupGlobalHandlers(){if(this.open){document.addEventListener("click",this.globalClickListener,{capture:true});document.addEventListener("keyup",this.handleGlobalKeyPress)}else{document.removeEventListener("click",this.globalClickListener);document.removeEventListener("keyup",this.handleGlobalKeyPress)}}render(){const e=this.getCssProperties();const o=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return t("div",{class:"trigger-anchor"},t("slot",{name:"trigger"}),t("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":o},openDirection:this.openDirection},t("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const o=e.target;const t=a(this.host,o);if(this.open&&!t){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius","--popover-box-shadow"];const o=getComputedStyle(this.host);const t=e.map((e=>o.getPropertyValue(e)));return n(e,t)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const h=class{constructor(o){e(this,o);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return t("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((o=>{if(o.slot==="trigger"){return}e.appendChild(o)}))}get host(){return r(this)}};h.style=d;export{l as limel_popover,h as limel_popover_surface};
2	+ //# sourceMappingURL=p-ec3fd127.entry.js.map

package/dist/lime-elements/p-ec3fd127.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","attributes","open","portalId","role","value","Object","entries","removeAttribute","setAttribute","String","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) || element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n */\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n */\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /**\n * True if the content within the popover should be visible\n */\n @Prop()\n public open = false;\n\n /**\n * Decides the popover's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > * {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /**\n * Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"mappings":"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"}

package/dist/types/components/popover/popover.d.ts CHANGED Viewed

@@ -42,6 +42,7 @@ import { OpenDirection } from '../menu/menu.types';
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover-basic
  * @exampleComponent limel-example-popover-trigger-interaction
+ * @exampleComponent limel-example-popover-styling
  */
 export declare class Popover {
   /**

package/dist/types/components.d.ts CHANGED Viewed

@@ -2101,6 +2101,7 @@ export namespace Components {
      * :::
      * @exampleComponent limel-example-popover-basic
      * @exampleComponent limel-example-popover-trigger-interaction
+     * @exampleComponent limel-example-popover-styling
      */
     interface LimelPopover {
         /**
@@ -4075,6 +4076,7 @@ declare global {
      * :::
      * @exampleComponent limel-example-popover-basic
      * @exampleComponent limel-example-popover-trigger-interaction
+     * @exampleComponent limel-example-popover-styling
      */
     interface HTMLLimelPopoverElement extends Components.LimelPopover, HTMLStencilElement {
     }
@@ -6724,6 +6726,7 @@ declare namespace LocalJSX {
      * :::
      * @exampleComponent limel-example-popover-basic
      * @exampleComponent limel-example-popover-trigger-interaction
+     * @exampleComponent limel-example-popover-styling
      */
     interface LimelPopover {
         /**
@@ -8464,6 +8467,7 @@ declare module "@stencil/core" {
              * :::
              * @exampleComponent limel-example-popover-basic
              * @exampleComponent limel-example-popover-trigger-interaction
+             * @exampleComponent limel-example-popover-styling
              */
             "limel-popover": LocalJSX.LimelPopover & JSXBase.HTMLAttributes<HTMLLimelPopoverElement>;
             /**

package/package.json CHANGED Viewed

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

package/dist/lime-elements/p-67e7d211.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as r,H as i}from"./p-443111b3.js";import{c as o}from"./p-96460db3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier(\n 0.19,\n 0.23,\n 0.26,\n 0.89\n );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:"";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:""}.placeholder{transition-property:top, padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}';const a=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.triggerStart=t(this,"triggerStart",7);this.triggerStop=t(this,"triggerStop",7);this.triggerChange=t(this,"triggerChange",7);this.renderHelperLine=()=>{if(!this.helperText){return}return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.isInvalid()})};this.isInvalid=()=>{if(this.readonly){return false}if(this.invalid){return true}};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.contentType="markdown";this.language="en";this.disabled=false;this.readonly=false;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=false;this.value=undefined;this.customElements=[];this.triggers=[];this.required=false;this.allowResize=true;this.ui="standard";this.helperTextId=o();this.editorId=o()}render(){return r(i,{class:{"has-helper-text":!!this.helperText}},r("span",{class:"notched-outline"},r("span",{class:"leading-outline"}),this.renderLabel(),r("span",{class:"trailing-outline"})),this.renderEditor())}renderEditor(){if(this.readonly&&!this.value){return[r("span",{class:"lime-looks-like-input-value"},"–"),this.renderHelperLine()]}if(this.readonly){return[r("limel-markdown",{value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}return[r("limel-prosemirror-adapter",{"aria-placeholder":this.placeholder,contentType:this.contentType,onChange:this.handleChange,customElements:this.customElements,value:this.value,"aria-controls":this.helperTextId,id:this.editorId,"aria-disabled":this.disabled,language:this.language,triggerCharacters:this.triggers,disabled:this.disabled}),this.renderPlaceholder(),this.renderHelperLine()]}renderLabel(){if(!this.label){return}return r("span",{class:"notch"},r("label",{htmlFor:this.editorId},this.label))}renderPlaceholder(){if(!this.placeholder\|\|this.value){return}return r("span",{class:"placeholder","aria-hidden":"true"},this.placeholder)}static get delegatesFocus(){return true}};a.style=l;export{a as limel_text_editor};
2	- //# sourceMappingURL=p-67e7d211.entry.js.map

package/dist/lime-elements/p-67e7d211.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","customElements","disabled","language","triggerCharacters","triggers","label","htmlFor"],"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 { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-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 * @exampleComponent limel-example-text-editor-triggers\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: { delegatesFocus: true },\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * A list of custom elements\n *\n * Any `CustomElement` that should be used inside the text editor needs\n * to be defined here.\n *\n * @private\n * @alpha\n */\n @Prop()\n public customElements: CustomElementDefinition[] = [];\n\n /**\n * A set of trigger characters\n *\n * Defining a character here will enable trigger events to be sent if the\n * character is detected in the editor.\n *\n * @private\n * @alpha\n */\n @Prop()\n public triggers: TriggerCharacter[] = [];\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Specifies the visual appearance of the editor.\n *\n * - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n */\n @Prop({ reflect: true })\n public ui?: EditorUiType = 'standard';\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n /**\n * Dispatched if a trigger character is detected.\n *\n * @private\n * @alpha\n */\n @Event()\n public triggerStart: EventEmitter<TriggerEventDetail>;\n\n /**\n * Dispatched if a trigger session is ended. That is if the selection\n * goes outside the trigger input or if something is inserted using the\n * supplied `TextEditor` insert function.\n *\n * @private\n * @alpha\n */\n @Event()\n public triggerStop: EventEmitter<TriggerEventDetail>;\n\n /**\n * Dispatched if a input is changed during an active trigger.\n *\n * @private\n * @alpha\n */\n @Event()\n public triggerChange: EventEmitter<TriggerEventDetail>;\n\n private 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 customElements={this.customElements}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n aria-disabled={this.disabled}\n language={this.language}\n triggerCharacters={this.triggers}\n disabled={this.disabled}\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"],"mappings":"6FAAA,MAAMA,EAAgB,qlO,MCmCTC,EAAU,MAgKnBC,YAAAC,G,0KAqFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA1QQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,yCAkBwB,G,cAYb,G,cAYV,M,iBAOE,K,QAYH,WAyCvBb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfmB,eAAgB3B,KAAK2B,eACrBN,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SAAQ,gBACFf,KAAK4B,SACpBC,SAAU7B,KAAK6B,SACfC,kBAAmB9B,KAAK+B,SACxBH,SAAU5B,KAAK4B,WAEnB5B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAKgC,MAAO,CACb,M,CAGJ,OACI7B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO8B,QAASjC,KAAKe,UAAWf,KAAKgC,O,CAKzCT,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}

package/dist/lime-elements/p-a8412bd0.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as o,g as r}from"./p-443111b3.js";import{c as i}from"./p-96460db3.js";import{E as s}from"./p-e03dfe70.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,t){var o;if(e.contains(t)\|\|((o=e.shadowRoot)===null\|\|o===void 0?void 0:o.contains(t))){return true}const r=c(t);if(!r){return false}return a(e,r)}function c(e){const t=e.closest(".limel-portal--container");if(t){return t.portalSource}const o=e.getRootNode();return o.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(o){e(this,o);this.close=t(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const t={"aria-haspopup":true,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[o,r]of Object.entries(t)){if(!r){e.removeAttribute(o)}else{e.setAttribute(o,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}setupGlobalHandlers(){if(this.open){document.addEventListener("click",this.globalClickListener,{capture:true});document.addEventListener("keyup",this.handleGlobalKeyPress)}else{document.removeEventListener("click",this.globalClickListener);document.removeEventListener("keyup",this.handleGlobalKeyPress)}}render(){const e=this.getCssProperties();const t=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return o("div",{class:"trigger-anchor"},o("slot",{name:"trigger"}),o("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t},openDirection:this.openDirection},o("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const t=e.target;const o=a(this.host,t);if(this.open&&!o){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"];const t=getComputedStyle(this.host);const o=e.map((e=>t.getPropertyValue(e)));return n(e,o)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const u=class{constructor(t){e(this,t);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return o("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((t=>{if(t.slot==="trigger"){return}e.appendChild(t)}))}get host(){return r(this)}};u.style=d;export{l as limel_popover,u as limel_popover_surface};
2	- //# sourceMappingURL=p-a8412bd0.entry.js.map

package/dist/lime-elements/p-a8412bd0.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","attributes","open","portalId","role","value","Object","entries","removeAttribute","setAttribute","String","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) || element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n */\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /**\n * True if the content within the popover should be visible\n */\n @Prop()\n public open = false;\n\n /**\n * Decides the popover's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > * {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /**\n * Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"mappings":"sSAWgBA,EACZC,EACAC,G,MAEA,GAAID,EAAQE,SAASD,MAAUE,EAAAH,EAAQI,cAAU,MAAAD,SAAA,SAAAA,EAAED,SAASD,IAAQ,CAChE,OAAO,I,CAGX,MAAMI,EAASC,EAAWL,GAC1B,IAAKI,EAAQ,CACT,OAAO,K,CAGX,OAAON,EAAeC,EAASK,EACnC,CAEA,SAASC,EAAWN,GAChB,MAAMO,EAAcP,EAAQQ,QAAQ,4BACpC,GAAID,EAAQ,CACR,OAAOA,EAAOE,Y,CAGlB,MAAMC,EAAWV,EAAQW,cAEzB,OAAOD,EAASE,IACpB,CCpCA,MAAMC,EAAa,0D,MCgENC,EAAO,MAwBhBC,YAAAC,G,uCA+EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,EAGbR,KAAAS,qBAAwB1B,IAC5B,MAAM2B,EAAa,CACf,gBAAiB,KACjB,gBAAiBV,KAAKW,KACtB,gBAAiBX,KAAKY,SACtBC,KAAM,UAGV,IAAK,MAAOV,EAAKW,KAAUC,OAAOC,QAAQN,GAAa,CACnD,IAAKI,EAAO,CACR/B,EAAQkC,gBAAgBd,E,KACrB,CACHpB,EAAQmC,aAAaf,EAAKgB,OAAOL,G,cAxH/B,M,6BAoBVd,KAAKY,SAAWQ,IAChBpB,KAAKqB,oBAAsBrB,KAAKqB,oBAAoBC,KAAKtB,K,CAInDuB,YACNvB,KAAKwB,qB,CAGFC,oBACHzB,KAAKwB,qB,CAGFE,qBACH,MAAMC,EAAc3B,KAAKL,KAAKR,WAAWyC,cAAc,QACvDD,EAAYE,mBAAmBC,QAAQ9B,KAAKS,qB,CAGxCe,sBACJ,GAAIxB,KAAKW,KAAM,CACXoB,SAASC,iBAAiB,QAAShC,KAAKqB,oBAAqB,CACzDY,QAAS,OAEbF,SAASC,iBAAiB,QAAShC,KAAKC,qB,KACrC,CACH8B,SAASG,oBAAoB,QAASlC,KAAKqB,qBAC3CU,SAASG,oBAAoB,QAASlC,KAAKC,qB,EAI5CkC,SACH,MAAMC,EAAgBpC,KAAKqC,mBAC3B,MAAMC,EAAgBC,iBAAiBvC,KAAKL,MAAM6C,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS5C,KAAKW,KACdkC,YAAa7C,KAAKY,SAClBkC,eAAgB,CAAE,UAAWR,GAC7BS,cAAe/C,KAAK+C,eAEpBN,EAAA,yBACIO,kBAAmBhD,KAAKL,KAAKsD,SAC7BC,MAAOd,K,CAOnBf,oBAAoBnB,GACxB,MAAMnB,EAAuBmB,EAAMiD,OACnC,MAAMC,EAAgBtE,EAAekB,KAAKL,KAAMZ,GAChD,GAAIiB,KAAKW,OAASyC,EAAe,CAC7BlD,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIX6B,mBACJ,MAAMgB,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMH,EAAQX,iBAAiBvC,KAAKL,MACpC,MAAM2D,EAASD,EAAcE,KAAKC,GACvBN,EAAMV,iBAAiBgB,KAGlC,OAAOC,EAAUJ,EAAeC,E,wFCpKxC,MAAMI,EAAoB,s+B,MCYbC,EAAc,M,0DAUhBC,mBACH5D,KAAK6D,e,CAGF1B,SACH,OAAOM,EAAA,OAAKC,MAAM,wBAAwBoB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkB/D,KAAKL,KAAKR,WAAWyC,cACzC,0BAGJoC,MAAMC,KAAKjE,KAAKgD,mBAAmBlB,SAAS9C,IACxC,GAAIA,EAAMkF,OAAS,UAAW,CAC1B,M,CAGJH,EAAgBI,YAAYnF,EAAM,G"}